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 / 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.

Features View source All params
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:
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!'
							}]);
						
						});
					
All available parameters (detailed documentation inside jquery.dataTables.yadcf.js):