Estamos muy familiarizados con las tablas HTML que se utilizan para almacenar datos relacionados. DataTables es un complemento moderno de jQuery para agregar controles interactivos y avanzados a las tablas HTML de nuestras páginas web. Algunas características de DataTables son la clasificación, búsqueda, paginación y ordenación de datos. Hay muchas formas disponibles para obtener datos en DataTables.
En este artículo, aprenderemos a cargar datos de un archivo de texto en las tablas de datos que están listas para la paginación o la clasificación.
Los archivos precompilados que se necesitan para implementar los códigos son
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript:
//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1, maximum-scale=1,
user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<!--Datatable plugin CSS file -->
<link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<!--jQuery library file -->
<script type="text/javascript" src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
<!--Datatable plugin JS library file -->
<script type="text/javascript" src=
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2>Datatables server side process</h2>
<!--HTML table with student data-->
<table id="tableID" class="display"
style="width: 100%;">
<thead>
<tr>
<th>StudentID</th>
<th>StudentName</th>
<th>Age</th>
<th>Gender</th>
<th>Marks Scored</th>
</tr>
</thead>
<tfoot>
<tr>
<th>StudentID</th>
<th>StudentName</th>
<th>Age</th>
<th>Gender</th>
<th>Marks Scored</th>
</tr>
</tfoot>
</table>
<script>
/* Initialization of datatable */
$(document).ready(function () {
/* Student's data loaded from
text file */
$('#tableID').DataTable({
"ajax": 'ajaxData.txt'
});
});
</script>
</body>
</html>
ajaxData.txt: La siguiente es la tabla de datos para estudiantes escrita en el archivo «ajaxData.txt» que se usa en la parte de JavaScript del código anterior.
{
"data": [
[
"ST1",
"Preeti",
"35",
"Female",
"320"
],
[
"ST2",
"Vincy",
"36",
"Female",
"170"
],
[
"ST3",
"Ashwini",
"41",
"Female",
"860"
],
[
"ST4",
"Kelly",
"32",
"Female",
"433"
],
[
"ST5",
"Satvik",
"41",
"male",
"162"
],
[
"ST6",
"William",
"37",
"Female",
"372"
],
[
"ST7",
"Chandan",
"31",
"male",
"375"
],
[
"ST8",
"David",
"45",
"male",
"327"
],
[
"ST9",
"Harry",
"29",
"male",
"205"
],
[
"ST10",
"Frost",
"29",
"male",
"300"
],
[
"ST11",
"Ginny",
"31",
"male",
"560"
],
[
"ST12",
"Flod",
"45",
"Female",
"342"
],
[
"ST13",
"Marshy",
"23",
"Female",
"470"
],
[
"ST13",
"Kennedy",
"43",
"male",
"313"
],
[
"ST14",
"Fiza",
"31",
"Female",
"750"
],
[
"ST15",
"Silva",
"34",
"male",
"985"
]
]
}
Producción:
Datos cargados desde el archivo:
Ejecución de búsqueda y paginación:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA