How to implement column specific search filter using DataTables plugin ?
DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for a webpage. It is a very simple-to-use plug-in with a variety of options for the developer’s custom changes as per the application’s need. The plugin’s features include pagination, sorting, searching, and multiple-column ordering.
In this article, we will demonstrate the implementation of a column-specific search filter using the DataTables plugin. Instead of performing search operations on the whole table, the search is performed only on a particular column for improving the performance of the system
Approach: In the following example, DataTables uses the student details from the HTML table as the main source. Each row in the table shows details for one student’s information.
- A DataTable is initialized.
- The developer can set the features of paging or searching as per the need as shown in the script part of the code.
- The column() API is used to select all the columns of the table.
- The flatten() API is used to convert the 2D array structure into a single dimension array and each() method is used to perform any action on each of the selected columns.
- The select list is appended to each column header.
- Any action is performed on change of any list value.
- The column().search() API is used to search the selected value and the draw() API is used to reflect the changes after the action in the table.
- column().cache() API is used to get the data from the column with sort() method to display sorted data.
- All the steps are done for each of the columns.
The pre-compiled files which are needed to implement are
CSS CDN:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript CDN:
https://code.jquery.com/jquery-3.5.1.js https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Example: The following example demonstrates the above approach showing column-specific search filter operation.
HTML
<!DOCTYPE html> < html > < head > < meta content=" initial-scale = 1 , maximum-scale = 1 , user-scalable = 0 " name = "viewport" /> < meta name = "viewport" content = "width=device-width" /> <!--Datatable plugin CSS file --> < link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" /> <!--jQuery library file --> < script type = "text/javascript" src = "https://code.jquery.com/jquery-3.5.1.js" > </ script > <!--Datatable plugin JS library file --> < script type = "text/javascript" src = "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js" > </ script > < style > td { text-align: center; } </ style > </ head > < body > < h2 > Column specific search filter using DataTables plugin </ h2 > <!--HTML tables with student data--> < table id = "tableID" class = "display" style = "width: 100%" > < thead > < tr > < th >StudentID</ th > < th >StudentName</ th > < th >Age</ th > < th >Gender</ th > < th >Marks Scored</ th > </ tr > </ thead > < tbody > < tr > < td >ST1</ td > < td >Prema</ td > < td >35</ td > < td >Female</ td > < td >320</ td > </ tr > < tr > < td >ST2</ td > < td >Wincy</ td > < td >36</ td > < td >Female</ td > < td >170</ td > </ tr > < tr > < td >ST3</ td > < td >Ashmita</ td > < td >41</ td > < td >Female</ td > < td >860</ td > </ tr > < tr > < td >ST4</ td > < td >Kelina</ td > < td >32</ td > < td >Female</ td > < td >433</ td > </ tr > < tr > < td >ST5</ td > < td >Satvik</ td > < td >41</ td > < td >male</ td > < td >162</ td > </ tr > < tr > < td >ST6</ td > < td >William</ td > < td >37</ td > < td >Female</ td > < td >372</ td > </ tr > < tr > < td >ST7</ td > < td >Chandan</ td > < td >31</ td > < td >male</ td > < td >375</ td > </ tr > < tr > < td >ST8</ td > < td >David</ td > < td >45</ td > < td >male</ td > < td >327</ td > </ tr > < tr > < td >ST9</ td > < td >Harry</ td > < td >29</ td > < td >male</ td > < td >205</ td > </ tr > < tr > < td >ST10</ td > < td >Frost</ td > < td >29</ td > < td >male</ td > < td >300</ td > </ tr > < tr > < td >ST14</ td > < td >Fiza</ td > < td >31</ td > < td >Female</ td > < td >750</ td > </ tr > < tr > < td >ST15</ td > < td >Silva</ td > < td >34</ td > < td >male</ td > < td >985</ td > </ tr > </ tbody > </ table > < br /> < script > /* Initialization of datatables */ $(document).ready(function () { // Paging and other information are // disabled if required, set to true var myTable = $("#tableID").DataTable({ paging: false, searching: true, info: false, }); // 2d array is converted to 1D array // structure the actions are // implemented on EACH column myTable .columns() .flatten() .each(function (colID) { // Create the select list in the // header column header // On change of the list values, // perform search operation var mySelectList = $("< select />") .appendTo(myTable.column(colID).header()) .on("change", function () { myTable.column(colID).search($(this).val()); // update the changes using draw() method myTable.column(colID).draw(); }); // Get the search cached data for the // first column add to the select list // using append() method // sort the data to display to user // all steps are done for EACH column myTable .column(colID) .cache("search") .sort() .each(function (param) { mySelectList.append( $('< option value = "' + param + '" >' + param + "</ option >") ); }); }); }); </ script > </ body > </ html > |
Output:
Contact Us