Yet Another DataTables Column Filter (yadcf) 0.9.3.beta

Externally triggered 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

Filters bellow will be triggered only when the "Filter" button (yadcf.exFilterExternallyTriggered function) click

Note: you can place the filters in column headers too (just remove the filter_container_id)

Custom Column:

Numbers Column:

Dates Column:

Values Column:

Tags Column:

Complex headers		Dates	are supported too!!!
Custom	Numbers	Dates	Values	Tags
Happy :)	1000	01/24/2014	a_value,b_value	Tag1Tag2
Joy	22	02/20/2014	b_value,c_value	Tag1Tag3
01	33	02/26/2014	a_value	Tag2Tag3
Sad	44	02/11/2014	b_value	Tag2
777	55	02/29/2014	a_value,b_value	Tag1Tag2
Jan	111	11/24/2014	c_value,d_value	Tag2
:)	222	02/03/2014	e_value,f_value	Tag3Tag4Tag5
:(	33	02/03/2014	a_value,bb_value	Tag5
:D	444	03/24/2014	a_value,f_value	Tag4
:'(	55	03/22/2014	a_value,c_value	Tag1Tag2
Never!!!	300	02/20/2014	a_value,b_value	Tag1Tag3
Finally :-]	242	02/04/2014	d_value,aa_value	Tag1
Why :(	703	02/05/2014	a_value,c_value	Tag1Tag2
Arr...	604	02/25/2014	a_value,bb_value	Tag1Tag2
H A P P Y :)	550	02/01/2014	c_value,e_value	Tag2
Bingo	901	02/02/2014	a_value,e_value	Tag1

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


						var oTable;
						
						
						$(document).ready(function () {
							'use strict';
						
							function myCustomFilterFunction(filterVal, columnVal) {
								var found;
								if (columnVal === '') {
									return true;
								}
								switch (filterVal) {
								case 'happy':
									found = columnVal.search(/:-\]|:\)|Happy|JOY|:D/g);
									break;
								case 'sad':
									found = columnVal.search(/:\(|Sad|:'\(/g);
									break;
								case 'angry':
									found = columnVal.search(/!!!|Arr\.\.\./g);
									break;
								case 'lucky':
									found = columnVal.search(/777|Bingo/g);
									break;
								case 'january':
									found = columnVal.search(/01|Jan/g);
									break;
								default:
									found = 1;
									break;
								}
						
								if (found !== -1) {
									return true;
								}
								return false;
							}
												
							oTable = $('#example').dataTable({
								"sScrollY": "300px",
								"iDisplayLength": 25,
								"bJQueryUI": true,
								"bStateSave": true
							}).yadcf([
							    {
							    	column_number : 0, 
							    	filter_container_id: 'external_filter_container_0',
							    	filter_type: 'custom_func', 
							    	custom_func: myCustomFilterFunction, 
							    	data: [{ value: 'happy', label: 'Happy'}, { value: 'sad', label: 'Sad'}, { value: 'angry', label: 'Angry'}, { value: 'lucky', label: 'Lucky'}, { value: 'january', label: 'January'}], 
							    	filter_default_label: "Custom func filter"},
							    {
						    		column_number : 1,
						    		filter_container_id: 'external_filter_container_1',
						    		filter_type: 'range_number_slider'
							    },
							    {
							    	column_number : 2,
							    	filter_container_id: 'external_filter_container_2',
							    	filter_type: 'range_date'
							    },
							    {
						    		column_number : 3,
						    		filter_container_id: 'external_filter_container_3',
						    		filter_type: "auto_complete", 
						    		text_data_delimiter: ","
						    	},
							    {
									column_number : 4,
									filter_container_id: 'external_filter_container_4',
									column_data_type: "html", 
									html_data_type: "text", 
									filter_default_label: "Select tag"
								}],
								{	externally_triggered: true});
						
						});