DataTables es un complemento de jQuery que se puede usar para agregar controles interactivos y avanzados a las tablas HTML para 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 de proceso se utiliza para especificar si el indicador de proceso está habilitado o no. Este indicador se muestra cuando DataTable está ocupado realizando alguna operación que llevaría algún tiempo. Esto es útil para tablas que tienen una gran cantidad de datos y requieren mucho tiempo para realizar cualquier operación. Este indicador podría notificar al usuario que se está realizando una operación y que no se ha atascado. Un valor verdadero muestra el indicador y un valor falso lo elimina.
Sintaxis:
{ processing: value }
Valor de la opción: esta opción tiene un valor único como se mencionó anteriormente y se describe a continuación:
- value: Este es un valor booleano que especifica si el indicador de procesamiento está habilitado o no. El valor predeterminado es falso.
El siguiente ejemplo ilustra el uso de esta opción.
Ejemplo 1: este ejemplo habilita el indicador de procesamiento que se puede ver al ordenar las columnas.
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 processing Option</h3>
<!-- HTML table with student data -->
<table id="tableID" class="display"
style="width: 100%;">
</table>
<script>
// Initialize a huge dataset to
// see the effects of processing
let dataset = [];
for (let i = 0; i < 250000; i++) {
let newArr =
[i, "Random Data: " + i, Math.random()];
dataset.push(newArr);
}
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
// Add the data created above
data: dataset,
columns: [
{ title: "Index" },
{ title: "String Index" },
{ title: "Random" },
],
// Enable the processing indicator
// of the DataTable
processing: true,
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo desactiva el indicador de procesamiento.
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 processing Option</h3>
<!-- HTML table with student data -->
<table id="tableID" class="display"
style="width: 100%;">
</table>
<script>
// Initialize a huge dataset to
// see the effects of processing
let dataset = [];
for (let i = 0; i < 250000; i++) {
let newArr =
[i, "Random Data: " + i, Math.random()];
dataset.push(newArr);
}
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
// Add the data created above
data: dataset,
columns: [
{ title: "Index" },
{ title: "String Index" },
{ title: "Random" },
],
// Disable the processing indicator
// of the DataTable
processing: false,
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA