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 | Country | Values | Tags |
---|---|---|---|---|
Some Data 1 | 1000 | United States | a_value,b_value | Tag1Tag2 |
Some Data 2 | 22 | United Kingdom | b_value,c_value | Tag1Tag3 |
Some Data 3 | 33 | Russia | a_value | Tag2Tag3 |
Some Data 4 | 44 | Aland Islands | b_value | Tag2 |
Some Data 5 | 55 | Chile | a_value,b_value | Tag1Tag2 |
Some Data 1 | 111 | China | c_value,d_value | Tag2 |
Some Data 2 | 222 | Russia | e_value,f_value | Tag3Tag4Tag5 |
Some Data 3 | 33 | Ukraine | a_value,bb_value | Tag5 |
Some Data 4 | 444 | Senegal | a_value,f_value | Tag4 |
Some Data 55 | 55 | Russia | a_value,c_value | Tag1Tag2 |
Some Data 1 | 300 | Russia | a_value,b_value | Tag1Tag3 |
Some Data 2 | 242 | Ukraine | d_value,aa_value | Tag1 |
Some Data 3 | 703 | United Kingdom | a_value,c_value | Tag1Tag2 |
Some Data 4 | 604 | United Kingdom | a_value,bb_value | Tag1Tag2 |
Some Data 5 | 550 | United States | c_value,e_value | Tag2 |
Some Data 1 | 901 | United States | a_value,e_value | Tag1 |
$(document).ready(function () { 'use strict'; //---------------------------------------------- //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({ "bJQueryUI": true, "bStateSave": true }).yadcf([{ column_number: 0, filter_type: "multi_select", select_type: 'select2' }, { column_number: 1, filter_type: "range_number_slider" }, { column_number: 2, select_type: 'select2', select_type_options: { width: '150px', minimumResultsForSearch: -1 // remove search box } }, { column_number: 3, filter_type: "text", text_data_delimiter: ",", exclude: true }, { column_number: 4, select_type: 'select2', select_type_options: { width: '150px' placeholder: 'Select tag', allowClear: true // show 'x' (remove) next to selection inside the select itself }, column_data_type: "html", html_data_type: "text", filter_reset_button_text: false // hide yadcf reset button }]); SyntaxHighlighter.all(); });