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 |
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}); });