DataTables searchDelay Option
Last Updated :
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>
<script type="text/javascript"
</script>
<link rel="stylesheet"
href=
<script src=
</script>
</head>
<body>
<h1 style="color: green;">
GeeksForGeeks
</h1>
<h3>DataTables searchDelay Option</h3>
<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>
<script type="text/javascript"
</script>
<link rel="stylesheet"
href=
<script src=
</script>
</head>
<body>
<h1 style="color: green;">
GeeksForGeeks
</h1>
<h3>DataTables searchDelay Option</h3>
<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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...