How to implement column specific search filter using DataTables plugin ?

Last Updated : 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>