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
Example: The following example demonstrates the above approach showing column-specific search filter operation.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.