How to implement column specific search filter using DataTables plugin ?

11 Nov, 2021
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:
kashishsoda
jQuery-DataTables
jQuery-Plugin
jQuery-Questions
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
HTTP headers | Content-Type
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to add options to a select element using jQuery?
How to Dynamically Add/Remove Table Rows using jQuery ?