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.

Output: