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 with chosen 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 Country Values Tags
Some Data 1 1000 United States a_value,b_value Tag1Tag2
Some Data 2 22 United Kingdom b_value,c_value Tag1Tag3
Some Data 3 33 Russia a_value Tag2Tag3
Some Data 4 44 Aland Islands b_value Tag2
Some Data 5 55 Chile a_value,b_value Tag1Tag2
Some Data 1 111 China c_value,d_value Tag2
Some Data 2 222 Russia e_value,f_value Tag3Tag4Tag5
Some Data 3 33 Ukraine a_value,bb_value Tag5
Some Data 4 444 Senegal a_value,f_value Tag4
Some Data 55 55 Russia a_value,c_value Tag1Tag2
Some Data 1 300 Russia a_value,b_value Tag1Tag3
Some Data 2 242 Ukraine d_value,aa_value Tag1
Some Data 3 703 United Kingdom a_value,c_value Tag1Tag2
Some Data 4 604 United Kingdom a_value,bb_value Tag1Tag2
Some Data 5 550 United States c_value,e_value Tag2
Some Data 1 901 United States a_value,e_value Tag1
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
					    	//----------------------------------------------
					    
						    oTable = $('#example').dataTable({
						        "bStateSave": true
						    }).yadcf([{
						        column_number: 0,
						        filter_type: "multi_select",
						        select_type: 'chosen'
						    }, {
						        column_number: 1,
						        filter_type: "range_number"
						    }, {
						        column_number: 2,
						        select_type: 'chosen',
						        select_type_options: {
						            no_results_text: 'Can\'t find ->',
						            search_contains: true
						        }
						    }, {
						        column_number: 3,
						        filter_type: "auto_complete",
						        text_data_delimiter: ","
						    }, {
						        column_number: 4,
						        select_type: 'chosen',
						        select_type_options: {
						            disable_search: true
						        },
						        column_data_type: "html",
						        html_data_type: "text",
						        filter_default_label: "Select tag"
						    }]);
						
						    SyntaxHighlighter.all();
						});
					
All available parameters (detailed documentation inside jquery.dataTables.yadcf.js):