Yet Another DataTables Column Filter (yadcf) 0.9.3.beta

DOM / Multiple Columns and Tables 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.

Downloads Change log

yadcf.initMultipleColumns:

yadcf.initMultipleTables:

Project Id	Sub Project Id	Primary Manager	Secondary Manager	Comment
Project 1	Project 1 - 1	Naruto	Hinata	This is the very first
Project 1	Project 1 - 2	Itachi	Saske	This is still the first
Project 1	Project 1 - 3	Tsunade	Sakura	First again
Project 2	Project 2 - 1	Kakashi	Sakumo	This is the second
Project 2	Project 2 - 2	Zabuza	Haku	Second it is
Project 2	Project 2 - 3	Orochimaru	Kabuto	Second again
Project 3	Project 3 - 1	Itachi	Kisame	This is the third
Project 3	Project 3 - 2	Sasori	Deidara	This is the third
Project 3	Project 3 - 3	Black Zetsu	White Zetsu	Third last time
Project 4	Project 4 - 1	Shino	Akamaru	This is the fourth
Project 4	Project 4 - 2	Kakuzu	Hidan	Kakuzu got four spare hearts
Project 4	Project 4 - 3	Nagato	Konan	last fourth

Project Id	Sub Project Id	Primary Manager	Secondary Manager	Comment
Sound Four		Orochimaru	Saske	Lalala
Akatsuki		Obito	Nagato	The end
Project 1	Project 1 - 3	Tsunade	Sakura	First again
Project 2	Project 2 - 1	Kakashi	Sakumo	This is the second
Project 2	Project 2 - 2	Zabuza	Haku	Second it is
Project 2	Project 2 - 3	Orochimaru	Kabuto	Second again
Taka		Sasuke	Orochimaru	This is the third
123	456	Sasori	Deidara	This is the third
AAA	BBB	Black Zetsu	White Zetsu	Third last time
III	JJJ	Shino	Akamaru	This is the fourth
Project 4	Project 4 - 2	Kakuzu	Hidan	Kakuzu got four spare hearts
Project 4	Project 4 - 3	Nagato	Konan	last fourth

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,
							oTable2;
						
						$(document).ready(function () {
						    'use strict';
						
						    oTable = $('#example1').DataTable({
						    });
						    
						
						    oTable2 = $('#example2').DataTable({
						    });
						
							yadcf.initMultipleColumns(oTable, [{
								column_number: [0, 1], 
								filter_container_id: 'multi-column-filter-01', 
								filter_default_label: 'First table columns 1 and 2!'
							}]);
							
							yadcf.initMultipleTables([oTable, oTable2], [{
								column_number: [2], 
								filter_type: 'multi_select', 
								select_type: 'chosen', 
								filter_container_id: 'multi-table-filter-2', 
								filter_default_label: 'All tables column 3!', 
								select_type_options: {width: '190px'}
							},
							{
								column_number: [3], 
								filter_type: 'select', 
								select_type: 'chosen', 
								filter_container_id: 'multi-table-filter-3', 
								filter_default_label: 'All tables column 4!', 
								select_type_options: {width: '180px'}
							},
							{
								column_number: [4], 
								filter_container_id: 'multi-table-filter-4', 
								filter_default_label: 'All tables column 5!'
							}]);
						
						});