DataTables es un complemento jQuery moderno para agregar controles interactivos y avanzados a las tablas HTML para una página web.
En este artículo, aprenderemos a leer la información de cada empleado de una array anidada utilizando el complemento DataTables .
Enfoque: la opción column.data del complemento DataTables se usa para extraer datos de arrays usando la notación de puntos. El punto (.) se usa para acceder a arrays o subarreglos de la opción column.data . La siguiente implementación muestra la lectura de arrays.
Los archivos precompilados que se necesitan para implementar son
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript:
https://code.jquery.com/jquery-3.5.1.js https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Estructura de arrays anidadas: la siguiente estructura contiene datos para un empleado. La clave «nombre» contiene valores para el nombre y el apellido , la clave «detalles» contiene valores para la designación y el salario seguido de las claves «ubicación» y «ciudad» con los valores respectivos.
fila de datos
Ejemplo: el siguiente código muestra los datos de todos los empleados en una tabla HTML utilizando el complemento DataTable. La parte de JavaScript del siguiente código extrae datos del archivo » nestedSubarrays.txt «. En el siguiente ejemplo , detalles.0 ayuda a obtener la designación y detalles.1 ayuda a obtener el salario de cada empleado. Del mismo modo , «datos»: «ubicación» obtiene la ubicación de ese empleado en particular.
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>
How to load data from nested
arrays in DataTables
</h2>
<!--HTML table with employee data-->
<table id="tableID" class="display"
style="width:100%">
<thead>
<!--Required column headers
for employee -->
<tr>
<th>Name</th>
<th>Location</th>
<th>Designation</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script>
$(document).ready(function () {
/* Initialization of datatable
by table ID */
$('#tableID').DataTable({
"processing": true,
/* Disabled features for not
showing extra info */
"info": false,
"ordering": false,
"paging": false,
"ajax": 'nestedSubarrays.txt',
"columns": [
// 0th index value of name
// to show firstname
{ "data": "name.0" },
{ "data": "location" },
// 0th index value of details
// to show designation
{ "data": "details.0" },
// 1st index value of details
// to show salary
{ "data": "details.1" }
]
});
});
</script>
</body>
</html>
nestedSubarrays.txt: El siguiente es el contenido de datos para todos los empleados en el archivo «nestedSubarrays.txt».
{
"data": [
{
"name": [
"Ashwini",
"Sharma"
],
"details": [
"System Architect",
"Rs.320,800"
],
"location": "chandni chowk",
"city": "Delhi"
},
{
"name": [
"Rakesh",
"Trivedi"
],
"details": [
"Solution Architect",
"Rs.420,800"
],
"location": "tellapur",
"city": "Hyderabad"
},
{
"name": [
"Ashu",
"Rana"
],
"details": [
"Accountant",
"Rs.120,100"
],
"location": "lal chowk",
"city": "Punjab"
},
{
"name": [
"Nupur",
"Joshi"
],
"details": [
"Developer",
"Rs.520,800"
],
"location": "Nallagandla",
"city": "Bangalore"
},
{
"name": [
"Jyotsna",
"Sharma"
],
"details": [
"Teacher",
"Rs.120,800"
],
"location": "New street",
"city": "Delhi"
},
{
"name": [
"Rajni",
"Singh"
],
"details": [
"System Admin",
"Rs.220,800"
],
"location": "Attapur",
"city": "Nagpur"
},
{
"name": [
"Tara",
"Sharma"
],
"details": [
"Tech lead",
"Rs.520,800"
],
"location": "chandni chowk",
"city": "Pune"
},
{
"name": [
"Ashmita",
"Sahoo"
],
"details": [
"System Lead",
"Rs.120,800"
],
"location": "chandni street",
"city": "Rajasthan"
},
{
"name": [
"Tony",
"Blair"
],
"details": [
"System Architect",
"Rs.620,800"
],
"location": "New lane",
"city": "Dharmshala"
},
{
"name": [
"Katrina",
"Kaif"
],
"details": [
"Engineer",
"Rs.320,800"
],
"location": "chandni chowk",
"city": "Mumbai"
},
{
"name": [
"John",
"Doe"
],
"details": [
"System Engineer",
"Rs.320,800"
],
"location": "Anna nagar",
"city": "Delhi"
},
{
"name": [
"Maya",
"Sharma"
],
"details": [
"Architect",
"Rs.520,800"
],
"location": "Sainikpuri",
"city": "Hyderabad"
}
]
}
Nota: suponga que el patrón de datos del archivo anterior no está de acuerdo con el formato JSON adecuado, entonces arroja una advertencia del complemento DataTable de la siguiente manera.
warning: table id={id-of-html-table} - Invalid JSON response.
Producción:
- Antes de ejecutar:
- Después de ejecutar:
Búsqueda de designació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