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.3.beta

Multiple tables 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
◀◀◀ Notice the pre filtered columns ("Numbers" & "Values" columns are pre filtered with the exFilterColumn function)
Some Data Numbers Yes / No Values Tags
Some Data 1 11 Yes g_value,b_value Tag6Tag2
Some Data 2 22 No b_value,c_value Tag1Tag3
Some Data 3 33 Yes a_value Tag2Tag3
Some Data 4 44 No b_value Tag2
Some Data 5 55 Yes a_value,b_value Tag1Tag2
Some Data 1 11 No c_value,d_value Tag2
Some Data 2 22 Yes e_value,f_value Tag3Tag4Tag5
Some Data 3 33 No a_value,bb_value Tag5
Some Data 4 44 Yes a_value,f_value Tag4
Some Data 5 55 No a_value,c_value Tag1Tag2
Some Data 1 11 Yes a_value,b_value Tag1Tag3
Some Data 2 22 No d_value,aa_value Tag1
Some Data 3 33 Yes a_value,c_value Tag1Tag2
Some Data 4 44 No a_value,bb_value Tag1Tag2
Some Data 5 55 Yes c_value,e_value Tag2
Some Data 1 11 No a_value,e_value Tag1


Numbers Yes / No Values Labels
1,000 Yes a_value,b_value Label1Label2
2,000 No b_value,c_value Label1Label3
3,000 Yes a_value Label2Label3
4,000 No b_value Label2
5,000 Yes a_value,b_value Label1Label2
1,000 No c_value,d_value Label2
2,000 Yes e_value,f_value Label3Label4Label5
3,000 No a_value,bb_value Label5
4,000 Yes a_value,f_value Label4
5,000 No a_value,c_value Label1Label2
1,000 Yes a_value,b_value Label1Label3
2,000 No d_value,aa_value Label1
3,000 Yes a_value,c_value Label1Label2
4,000 No a_value,bb_value Label1Label2
5,000 Yes c_value,e_value Label2
1,000 No a_value,e_value Label1
Numbers Yes / No Values Labels


Some Data More Data Values Tags
Some Data a More Data aa a_value,b_value TagaTagb
Some Data b More Data bb b_value,c_value TagaTagc
Some Data c More Data cc a_value TagbTagc
Some Data d More Data dd b_value Tagb
Some Data e More Data ee a_value,b_value TagaTagb
Some Data a More Data aa c_value,d_value Tagb
Some Data b More Data bb e_value,f_value TagcTagdTage
Some Data c More Data cc a_value,bb_value Tage
Some Data d More Data dd a_value,f_value Tagd
Some Data e More Data ee a_value,c_value TagaTagb
Some Data a More Data aa a_value,b_value TagaTagc
Some Data b More Data bb d_value,aa_value Taga
Some Data c More Data cc a_value,c_value TagaTagb
Some Data d More Data dd a_value,bb_value TagaTagb
Some Data e More Data ee c_value,e_value Tagb
Some Data a More Data aa a_value,e_value Taga
Features:
Usage(on this page example):
					$(document).ready(function () {
				    'use strict';
						    
				    //----------------------------------------------
			    	//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
			    	//----------------------------------------------
					    
				    var firstTable = $('#example1').dataTable({
				        "bJQueryUI": true
				    }).yadcf([{
				        column_number: 0
				    }, {
				        column_number: 1,
				        filter_type: "range_number",
				        filter_container_id: "external_filter_container"
				    }, {
				        column_number: 2,
				        data: [{
				            value: 'Yes',
				            label: 'Yessss :)'
				        }, {
				            value: 'No',
				            label: 'Noooo :('
				        }],
				        filter_default_label: "Select Yes/No"
				    }, {
				        column_number: 3,
				        filter_type: "text",
				        text_data_delimiter: ",",
				        filter_delay: 1500, 
				        filter_default_label: 'Filter delay is enabled!'
				    }, {
				        column_number: 4,
				        column_data_type: "html",
				        html_data_type: "text",
				        filter_default_label: "Select tag"
				    }]);
				
				    yadcf.exFilterColumn(firstTable, [
				        [1, {
				            from: 1,
				            to: 40
				        }],
				        [3, "a_value"]
				    ]);
				
				    $('#example2').dataTable({
				        "bJQueryUI": true
				    }).yadcf([{
				        column_number: 0,
				        filter_type: "range_number_slider",
				        ignore_char: ","
				    }, {
				        column_number: 2,
				        filter_type: "auto_complete",
				        text_data_delimiter: ",",
				        filter_default_label: "Enter a value"
				    }, {
				        column_number: 3,
				        column_data_type: "html",
				        html_data_type: "text",
				        filter_default_label: "Choose label"
				    }],
				      'footer');
				
				
				    $('#example3').dataTable({
				        "bJQueryUI": true
				    }).yadcf([{
				        column_number: 0
				    }, {
				        column_number: 1,
				        filter_default_label: "Pick some"
				    }, {
				        column_number: 2,
				        text_data_delimiter: ",",
				        enable_auto_complete: true
				    }]);
				
				});
				
All available parameters (detailed documentation inside jquery.dataTables.yadcf.0.9.2.js):