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