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

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.

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