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.

Downloads Change log

External filter for "Numbers" column :

◀◀◀ 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:

Support DataTables 1.10.0 - Use yadcf.init(...) for new API (Capital "D")
Support all data source: DOM, Javascript, Ajax and server-side processing (1.10.0 +)
Various filter options - 9 different types !!! :
- select input
- multiple selection input
- text input
- autocomplete input - make use of the jQuery UI Autocomplete widget (with some enhancements)
- date input - make use of the jQuery UI Datepicker widget (with some enhancements)
- range of numbers
- range of numbers with slider widget - make use of the jQuery UI Slider widget (with some enhancements)
- range of dates - make use of the jQuery UI Datepicker widget (with some enhancements)
- custom function
Filters can be placed in the header (thead) or in the footer (tfoot) , second argument of yadcf constructor or third argument of init function
Parsing various types of columns:
- plain text
- plain text with delimiter
- one or more HTML elements with the ability to extract text / value / id from each HTML element
Multiple tables support
CSS support:
- each filter element has got a css style class , so its style can be easily overridden
Reset button for filter:
- next to each filter a reset button will appear (this button allows the user to reset the filter)
Filter in use visual notification:
- when a certain filter is being used it will be highlighted (the color of highlight can easily be changed with css)
Miscellaneous:
- integration with the Chosen / Select2 plugins (for single and multiple select)
- integration with the Datatables ColVis plugin (1.10.0 +)
- filter delay (for text / range_number / range_date filters / range_number_slider)
- predefined data source for filter (array of strings or objects)
- mData support (including deeply nested objects)
- ability to place the filter in an external html element (for example: inside a div element)
- ability to control matching mode of the filter (Possible values: contains / exact / startsWith)
- change the filter's default label (Select value, etc)
- change the filter's reset button text (x, clear etc)
- define how the values in the filter will be sorted
- define the order in which the values in the filter will be sorted
- support all major browser (including IE8)
- define in which date format the date will be parsed and displayed in datepicker widget
- support aoColumns { "bVisible": false }
- support for case sensitive filtering
- allow addition of classes to filters
External API functions:
- exFilterColumn: Allows to trigger filter/s externally/programmatically (support ALL filter types!!!) , perfect for showing table with pre filtered columns
- exGetColumnFilterVal: Allows to retrieve column current filtered value (support ALL filter types!!!)
- exResetAllFilters: Allows to reset all filters externally/programmatically (support ALL filter types!!!) , perfect for adding a "reset all" button to your page!
Notable datatables API / Features support
- ColReorder / scrollX / scrollY / stateSave / deferRender / HTML5 data-* attributes / Complex headers

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
				    }]);
				
				});