Open In App
Related Articles

How to implement column specific search filter using DataTables plugin ?

Improve Article
Save Article
Like Article

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


JavaScript CDN:

Example:  The following example demonstrates the above approach showing column-specific search filter operation.


<!DOCTYPE html>
  <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=
  <!--jQuery library file -->
  <script type="text/javascript" src=
  <!--Datatable plugin JS library file -->
  <script type="text/javascript" src=
    td {
      text-align: center;
    Column specific search filter
    using DataTables plugin
  <!--HTML tables with student data-->
  <table id="tableID" class="display"
      style="width: 100%">
        <th>Marks Scored</th>
  <br />
      /* 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
          .each(function (colID) {
            // Create the select list in the
            // header column header
            // On change of the list values,
            // perform search operation
            var mySelectList = $("<select />")
              .on("change", function () {
                // update the changes using draw() method
            // 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
              .each(function (param) {
                  $('<option value="' + param + '">'
                    + param + "</option>")


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 11 Nov, 2021
Like Article
Save Article
Similar Reads
Related Tutorials