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

DOM source with select2 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
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:
						    oTable = $('#example').dataTable({
						        "bJQueryUI": true,
						        "bStateSave": true
						        column_number: 0,
						        filter_type: "multi_select",
						        select_type: 'select2'
						    }, {
						        column_number: 1,
						        filter_type: "range_number_slider"
						    }, {
						        column_number: 2,
						        select_type: 'select2',
						        select_type_options: {
						            width: '150px',
						            minimumResultsForSearch: -1 // remove search box
						    }, {
						        column_number: 3,
						        filter_type: "text",
						        text_data_delimiter: ",",
						        exclude: true
						    }, {
						        column_number: 4,
						        select_type: 'select2',
						        select_type_options: {
						            width: '150px'
									placeholder: 'Select tag',
									allowClear: true  // show 'x' (remove) next to selection inside the select itself
						        column_data_type: "html",
						        html_data_type: "text",
						        filter_reset_button_text: false // hide yadcf reset button
All available parameters (detailed documentation inside jquery.dataTables.yadcf.0.9.2.js):