Fork me on GitHub
Like it? Star it! Want it? Fork it! And also follow ;)
Follow @danielreznick Tweet
Check out my other jQuery plug-in: Feedback MeCheck out my AngularJS Directive: Color Picker

Yet Another DataTables Column Filter (yadcf) 0.9.1

DOM source example

This jQuery plug-in allows the user to easily add filter components to table columns, the plug-in works on top of the DataTables jQuery plug-in.

Features View source All params
Complex headers Dates are supported too!!!
Custom Numbers Values Tags
Happy :) 1000 01/24/2014 a_value,b_value Tag1Tag2
Joy 22 02/20/2014 b_value,c_value Tag1Tag3
01 33 02/26/2014 a_value Tag2Tag3
Sad 44 02/11/2014 b_value Tag2
777 55 02/29/2014 a_value,b_value Tag1Tag2
Jan 111 11/24/2014 c_value,d_value Tag2
:) 222 02/03/2014 e_value,f_value Tag3Tag4Tag5
:( 33 02/03/2014 a_value,bb_value Tag5
:D 444 03/24/2014 a_value,f_value Tag4
:'( 55 03/22/2014 a_value,c_value Tag1Tag2
Never!!! 300 02/20/2014 a_value,b_value Tag1Tag3
Finally :-] 242 02/04/2014 d_value,aa_value Tag1
Why :( 703 02/05/2014 a_value,c_value Tag1Tag2
Arr... 604 02/25/2014 a_value,bb_value Tag1Tag2
H A P P Y :) 550 02/01/2014 c_value,e_value Tag2
Bingo 901 02/02/2014 a_value,e_value Tag1
Features:
Usage(on this page example):
						$(document).ready(function () {
						    'use strict';
						    
						    //----------------------------------------------
						    //Example on how to define a custom filter function
					    	//this function is goinf to be passesd to yadcf as custom_func parameter value
					    	//and going to be tested against each value in the column
					    	//----------------------------------------------
					    
							function myCustomFilterFunction(filterVal, columnVal) {
						        var found;
						        if (columnVal === '') {
						            return true;
						        }
						        switch (filterVal) {
					            case 'happy':
					                found = columnVal.search(/:-\]|:\)|Happy|JOY|:D/g);
					                break;
					            case 'sad':
					                found = columnVal.search(/:\(|Sad|:'\(/g);
					                break;
					            case 'angry':
					                found = columnVal.search(/!!!|Arr\.\.\./g);
					                break;
					            case 'lucky':
					                found = columnVal.search(/777|Bingo/g);
					                break;
					            case 'january':
					                found = columnVal.search(/01|Jan/g);
					                break;
					            default:
					                found = 1;
					                break;
						        }
						
						        if (found !== -1) {
						            return true;
						        }
						        return false;
						    }
							
						    //----------------------------------------------
					    	//note that this is the old yadcf API for init the filters 
					    	//new init function should be used when working with new Datatable (capital "D" API)
					    	//for new init function see: http://yadcf-showcase.appspot.com/DOM_Ajax_Multiple_1.10.html
					    	//----------------------------------------------
						    oTable = $('#example').dataTable({
								"sScrollY": "300px",
								"iDisplayLength": 25,
								"bJQueryUI": true,
								"bStateSave": true
						    }).yadcf([{
						        column_number: 0,
						        filter_type: 'custom_func',
						        custom_func: myCustomFilterFunction,
						        data: [{
						            value: 'happy',
						            label: 'Happy'
						        }, {
						            value: 'sad',
						            label: 'Sad'
						        }, {
						            value: 'angry',
						            label: 'Angry'
						        }, {
						            value: 'lucky',
						            label: 'Lucky'
						        }, {
						            value: 'january',
						            label: 'January'
						        }],
						        filter_default_label: "Custom func filter"
						    }, {
						        column_number: 1,
						        filter_type: "range_number_slider"
						    }, {
						        column_number: 2,
						        filter_type: "range_date",
						        filter_container_id: "external_filter_container"
						    }, {
						        column_number: 3,
						        filter_type: "auto_complete",
						        text_data_delimiter: ","
						    }, {
						        column_number: 4,
						        column_data_type: "html",
						        html_data_type: "text",
						        filter_default_label: "Select tag"
						    }]);
					
						});
					
All available parameters (detailed documentation inside jquery.dataTables.yadcf.js):