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.
| 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 |
$(document).ready(function () {
'use strict';
//----------------------------------------------
//Example on how to define a custom filter function
//this function is goinf to be passesd to yadcf as custom_func parameter value
//and going to be tested against each value in the column
//----------------------------------------------
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;
}
//----------------------------------------------
//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
//----------------------------------------------
oTable = $('#example').dataTable({
"sScrollY": "300px",
"iDisplayLength": 25,
"bJQueryUI": true,
"bStateSave": true
}).yadcf([{
column_number: 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_type: "range_number_slider"
}, {
column_number: 2,
filter_type: "range_date",
filter_container_id: "external_filter_container"
}, {
column_number: 3,
filter_type: "auto_complete",
text_data_delimiter: ","
}, {
column_number: 4,
column_data_type: "html",
html_data_type: "text",
filter_default_label: "Select tag"
}]);
});