Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

DataTables Searching Option

  • Last Updated : 31 May, 2021

DataTables is jQuery plugin that can be used for adding interactive and advanced controls to HTML tables for the webpage. This also allows the data in the table to be searched, sorted, and filtered according to the needs of the user. The DataTable also exposes a powerful API that can be further used to modify how the data is displayed.

The searching option is used to specify whether the searching abilities of the DataTable are enabled or not. A DataTable implements searching by filtering the rows that contain the keywords entered by the user. A true value enables the searching and a false value disables it.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Note that this option should not be used when only the search bar has to be removed and not disable the searching functionality. It is recommended to remove only the search bar using the DataTables dom() option.

Syntax:



{ searching: value }

 

Option Value: This option has a single value as mentioned above and described below:

  • value: This is a boolean value that specifies whether the searching abilities of the DataTable are enabled or not. The default value is true.

The below example illustrates the use of this option.

Example 1: This example disables the searching functionality of the DataTable.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- jQuery -->
    <script type="text/javascript" 
    </script>
  
    <!-- DataTables CSS -->
    <link rel="stylesheet" href=
  
    <!-- DataTables JS -->
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksForGeeks
    </h1>
    <h3>DataTables Searching Option</h3>
  
    <!--HTML table with student data-->
    <table id="tableID" class="display">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Sam</td>
                <td>35</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Sam</td>
                <td>30</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Sameer</td>
                <td>45</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Rob</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Robber</td>
                <td>68</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Mikasa</td>
                <td>25</td>
            </tr>
            <tr>
                <td>7</td>
                <td>Eren</td>
                <td>23</td>
            </tr>
            <tr>
                <td>8</td>
                <td>Jean</td>
                <td>35</td>
            </tr>
            <tr>
                <td>9</td>
                <td>Walter</td>
                <td>65</td>
            </tr>
            <tr>
                <td>10</td>
                <td>Jessie</td>
                <td>28</td>
            </tr>
            <tr>
                <td>11</td>
                <td>Gabi</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>
      
    <script>
  
        // Initialize the DataTable
        $(document).ready(function () {
            $('#tableID').DataTable({
  
                // Disable the searching 
                // of the DataTable
                searching: false
            });
        });
    </script>
</body>
  
</html>

Output:

Example 2: This example enables the searching functionality of the DataTable.

HTML




<html>
  
<head>
    <!-- jQuery -->
    <script type="text/javascript" 
    </script>
  
    <!-- DataTables CSS -->
    <link rel="stylesheet" href=
  
    <!-- DataTables JS -->
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksForGeeks
    </h1>
    <h3>DataTables Searching Option</h3>
  
    <!--HTML table with student data-->
    <table id="tableID" class="display">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
          
        <tbody>
            <tr>
                <td>1</td>
                <td>Sam</td>
                <td>35</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Sam</td>
                <td>30</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Sameer</td>
                <td>45</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Rob</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Robber</td>
                <td>68</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Mikasa</td>
                <td>25</td>
            </tr>
            <tr>
                <td>7</td>
                <td>Eren</td>
                <td>23</td>
            </tr>
            <tr>
                <td>8</td>
                <td>Jean</td>
                <td>35</td>
            </tr>
            <tr>
                <td>9</td>
                <td>Walter</td>
                <td>65</td>
            </tr>
            <tr>
                <td>10</td>
                <td>Jessie</td>
                <td>28</td>
            </tr>
            <tr>
                <td>11</td>
                <td>Gabi</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>
  
    <script>
  
        // Initialize the DataTable
        $(document).ready(function () {
            $('#tableID').DataTable({
  
                // Enable the searching
                // of the DataTable
                searching: true
            });
        });
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :