DataTables searchDelay Option - GeeksforGeeks

13 Jul, 2021
DataTables is a 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 searchDelay option is used to specify the number of milliseconds after which the term entered the search box is searched in the table. This can be useful to reduce the number of redraws of the table and save processing power on slower systems. It accepts an integer value that denotes the number of milliseconds of the delay. The default value for client-side search is 0ms, which means that the value is searched and the results are displayed immediately. On the server-side, the delay is set to a default of 400ms to reduce the number of calls to the server.
Note: This affects only the global search box of the DataTable. The API methods like search() are not affected by changing this option.
Syntax:
{ searchDelay: value }
 
Parameters: This option has a single value as mentioned above and described below.
value: This is an integer value that specifies the number of milliseconds after which the search is executed.
The example below illustrates the use of this option.
Example 1: In this example, we set the search delay to 2000 milliseconds.
HTML
<!DOCTYPE html><html>  <head>  <!-- jQuery -->  <script type="text/javascript"           src="https://code.jquery.com/jquery-3.5.1.js">  </script>    <!-- DataTables CSS -->  <link rel="stylesheet"        href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">    <!-- DataTables JS -->  <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">  </script></head>  <body>  <h1 style="color: green;">    GeeksForGeeks  </h1>  <h3>DataTables searchDelay Option</h3>    <!-- HTML table with random data -->  <table id="tableID" class="display nowrap">    <thead>      <tr>        <th>Day</th>        <th>Name</th>        <th>Age</th>      </tr>    </thead>    <tbody>      <tr>        <td>2</td>        <td>Patricia</td>        <td>22</td>      </tr>      <tr>        <td>2</td>        <td>Caleb</td>        <td>47</td>      </tr>      <tr>        <td>1</td>        <td>Abigail</td>        <td>48</td>      </tr>      <tr>        <td>5</td>        <td>Rahim</td>        <td>44</td>      </tr>      <tr>        <td>5</td>        <td>Sheila</td>        <td>22</td>      </tr>      <tr>        <td>2</td>        <td>Lance</td>        <td>48</td>      </tr>      <tr>        <td>5</td>        <td>Erin</td>        <td>48</td>      </tr>      <tr>        <td>1</td>        <td>Christopher</td>        <td>28</td>      </tr>      <tr>        <td>2</td>        <td>Roary</td>        <td>35</td>      </tr>      <tr>        <td>2</td>        <td>Astra</td>        <td>37</td>      </tr>    </tbody>  </table>  <script>      // Initialize the DataTable    $(document).ready(function () {      $('#tableID').DataTable({          // Enable delaying of the search        // to the given number of milliseconds        searchDelay: 2000      });    });   </script></body>  </html>
Output:
Example 2: In this example, we set the search delay to 0 milliseconds, which means that a search is instant.
HTML
<!DOCTYPE html><html>  <head>  <!-- jQuery -->  <script type="text/javascript"           src="https://code.jquery.com/jquery-3.5.1.js">  </script>    <!-- DataTables CSS -->  <link rel="stylesheet"        href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">    <!-- DataTables JS -->  <script src=          "https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">  </script></head>  <body>  <h1 style="color: green;">    GeeksForGeeks  </h1>  <h3>DataTables searchDelay Option</h3>    <!-- HTML table with random data -->  <table id="tableID" class="display nowrap">    <thead>      <tr>        <th>Day</th>        <th>Name</th>        <th>Age</th>      </tr>    </thead>    <tbody>      <tr>        <td>2</td>        <td>Patricia</td>        <td>22</td>      </tr>      <tr>        <td>2</td>        <td>Caleb</td>        <td>47</td>      </tr>      <tr>        <td>1</td>        <td>Abigail</td>        <td>48</td>      </tr>      <tr>        <td>5</td>        <td>Rahim</td>        <td>44</td>      </tr>      <tr>        <td>5</td>        <td>Sheila</td>        <td>22</td>      </tr>      <tr>        <td>2</td>        <td>Lance</td>        <td>48</td>      </tr>      <tr>        <td>5</td>        <td>Erin</td>        <td>48</td>      </tr>      <tr>        <td>1</td>        <td>Christopher</td>        <td>28</td>      </tr>      <tr>        <td>2</td>        <td>Roary</td>        <td>35</td>      </tr>      <tr>        <td>2</td>        <td>Astra</td>        <td>37</td>      </tr>    </tbody>  </table>    <script>      // Initialize the DataTable    $(document).ready(function () {      $('#tableID').DataTable({          // Prevent any delay of the search        // by setting the value to 0        searchDelay: 0      });    });   </script></body>  </html>
Output:
Reference link: https://datatables.net/reference/option/searchDelay
jQuery-DataTables
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
Difference Between JavaScript and jQuery
How to get the value in an input text box using jQuery ?
QR Code Generator using HTML, CSS and jQuery
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?