DataTables es un complemento de jQuery que se puede usar para agregar controles interactivos y avanzados a las tablas HTML de la página web. Esto también permite buscar, ordenar y filtrar los datos de la tabla según las necesidades del usuario. DataTable también expone una potente API que se puede utilizar para modificar la forma en que se muestran los datos.
La opción searchDelay se usa para especificar el número de milisegundos después de los cuales el término ingresado en el cuadro de búsqueda se busca en la tabla. Esto puede resultar útil para reducir el número de redibujados de la tabla y ahorrar potencia de procesamiento en sistemas más lentos. Acepta un valor entero que denota el número de milisegundos del retraso. El valor predeterminado para la búsqueda del lado del cliente es 0ms, lo que significa que se busca el valor y los resultados se muestran inmediatamente. En el lado del servidor, la demora se establece en un valor predeterminado de 400 ms para reducir la cantidad de llamadas al servidor.
Nota: Esto afecta solo al cuadro de búsqueda global de DataTable. Los métodos API como search() no se ven afectados al cambiar esta opción.
Sintaxis:
{ searchDelay: value }
Parámetros: esta opción tiene un valor único como se mencionó anteriormente y se describe a continuación.
- valor: Este es un valor entero que especifica el número de milisegundos después de los cuales se ejecuta la búsqueda.
El siguiente ejemplo ilustra el uso de esta opción.
Ejemplo 1: En este ejemplo, configuramos el retraso de búsqueda en 2000 milisegundos.
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>
Producción:
Ejemplo 2: En este ejemplo, configuramos el retraso de búsqueda en 0 milisegundos, lo que significa que la búsqueda es instantánea.
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>
Producción:
Enlace de referencia: https://datatables.net/reference/option/searchDelay
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA