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 / Ajax / Multiple 1.10.0 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
Some Data Numbers Dates Values Tags
Some Data 1 1000 01/24/2014 a_value,b_value Tag1Tag2
Some Data 2 22 02/20/2014 b_value,c_value Tag1Tag3
Some Data 3 33 02/26/2014 a_value Tag2Tag3
Some Data 4 44 02/11/2014 b_value Tag2
Some Data 5 55 02/29/2014 a_value,b_value Tag1Tag2
Some Data 1 111 11/24/2014 c_value,d_value Tag2
Some Data 2 222 02/03/2014 e_value,f_value Tag3Tag4Tag5
Some Data 3 33 02/03/2014 a_value,bb_value Tag5
Some Data 4 444 03/24/2014 a_value,f_value Tag4
Some Data 5 55 03/22/2014 a_value,c_value Tag1Tag2
Some Data 1 300 02/20/2014 a_value,b_value Tag1Tag3
Some Data 2 242 02/04/2014 d_value,aa_value Tag1
Some Data 3 703 02/05/2014 a_value,c_value Tag1Tag2
Some Data 4 604 02/25/2014 a_value,bb_value Tag1Tag2
Some Data 5 550 02/01/2014 c_value,e_value Tag2
Some Data 1 901 02/02/2014 a_value,e_value Tag1
Some Data 11 911 02/22/2014 a_value,e_value Tag11


Rendering engine Browser Platform(s) Engine version CSS grade
Features:
Usage(on this page example):
					$(document).ready(function () {
					    'use strict';
					
					    var oTable,
							oTable2;
					    
					    oTable = $('#example').DataTable({
							stateSave: true
					    });
					    
					    //----------------------------------------------
					    //notice the new yadcf API for init the filters:
					    //----------------------------------------------
					    
					    yadcf.init(oTable, [{
					        column_number: 0
					    }, {
					        column_number: 1,
					        filter_type: "range_number_slider"
					    }, {
					        column_number: 2,
					        filter_type: "date"
					    }, {
					        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"
					    }]);
					
					    oTable2 = $('#entrys_table').DataTable({
					    	"responsive": true,
					        "processing": true,
					        "ajax": "resources/sources/deep.txt",
					        "columns": [{
					            "data": "engine"
					        }, {
					            "data": "browser"
					        }, {
					            "data": "platform.inner"
					        }, {
					            "data": "platform.details.0"
					        }, {
					            "data": "platform.details.1"
					        }]
					    });
					    
					    //----------------------------------------------
					    //notice the new yadcf API for init the filters:
					    //----------------------------------------------
					    
					    yadcf.init(oTable2, [{
					        column_number: 0
					    }, {
					        column_number: 1,
			                filter_type: "text",
					        exclude: true,
					        exclude_label: '!(not)'
					    }, {
					        column_number: 2,
					        filter_type: "auto_complete"
					    }, {
					        column_number: 3,
					        filter_type: "range_number_slider",
					        ignore_char: "-"
					    }, {
					        column_number: 4
					    }]);
					    
					    yadcf.exFilterColumn(oTable2, [[0, "Misc"]]);
					    
					    
				    	yadcf.initMultipleTables([oTable, oTable2], [{
							filter_container_id: 'multi-table-filter',
							filter_default_label: 'Filter all tables!'
						}]);
					});
					
All available parameters (detailed documentation inside jquery.dataTables.yadcf.js):