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.
Some Data | Numbers | Dates | Values | Tags |
---|---|---|---|---|
Some Data 1 | 1000 | 01/24/2014 | a_value,b_value | Tag1Tag2 |
Some Data 2 | 22 | 02/20/2014 | b_value,c_value | Tag1Tag3 |
Some Data 3 | 33 | 02/26/2014 | a_value | Tag2Tag3 |
Some Data 4 | 44 | 02/11/2014 | b_value | Tag2 |
Some Data 5 | 55 | 02/29/2014 | a_value,b_value | Tag1Tag2 |
Some Data 1 | 111 | 11/24/2014 | c_value,d_value | Tag2 |
Some Data 2 | 222 | 02/03/2014 | e_value,f_value | Tag3Tag4Tag5 |
Some Data 3 | 33 | 02/03/2014 | a_value,bb_value | Tag5 |
Some Data 4 | 444 | 03/24/2014 | a_value,f_value | Tag4 |
Some Data 5 | 55 | 03/22/2014 | a_value,c_value | Tag1Tag2 |
Some Data 1 | 300 | 02/20/2014 | a_value,b_value | Tag1Tag3 |
Some Data 2 | 242 | 02/04/2014 | d_value,aa_value | Tag1 |
Some Data 3 | 703 | 02/05/2014 | a_value,c_value | Tag1Tag2 |
Some Data 4 | 604 | 02/25/2014 | a_value,bb_value | Tag1Tag2 |
Some Data 5 | 550 | 02/01/2014 | c_value,e_value | Tag2 |
Some Data 1 | 901 | 02/02/2014 | a_value,e_value | Tag1 |
Some Data 11 | 911 | 02/22/2014 | a_value,e_value | Tag11 |
$(document).ready(function () { 'use strict'; var oTable; oTable = $('#example').DataTable(); yadcf.init(oTable, [ { column_number : 0, filter_type: "multi_select", select_type: 'select2' }, { column_number: 3, filter_type: "auto_complete", text_data_delimiter: "," }, { column_number : 4, filter_type: "multi_select", select_type: 'select2', column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag" } ], { cumulative_filtering: true } ); });