tablas de datos
En este artículo, demostraremos la carga ajax del objeto de datos usando el complemento DataTables .
Enfoque: en el siguiente ejemplo, DataTables utiliza objetos de datos de un archivo sin formato como fuente principal. Cada fila de la tabla muestra los detalles de la información de un empleado.
- Esto se puede implementar mediante el uso de la opción column.data de la API del complemento DataTables .
- La fuente devuelve una array de objetos que se utiliza para mostrar los datos en la tabla HTML.
El ejemplo de la estructura de la fila de datos del archivo de datos es el siguiente. Simplemente representa los datos en par clave y valor como se muestra a continuación.
objeto de datos de empleados con clave y par de valores
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
Ejemplo: el siguiente código demuestra la obtención del objeto de datos de empleados de un archivo «nestedData.txt» y muestra todas las filas en la tabla HTML usando el complemento.
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 demonstrate the use of Ajax
loading data in DataTables
</h2>
<!-- HTML table with employee data -->
<table id="tableID" class="display" style="width:100%">
<thead>
<!-- Column headers with employee data -->
<tr>
<th>EmployeeID</th>
<th>Name</th>
<th>Designation</th>
<th>Salary</th>
<th>Address</th>
<th>City</th>
</tr>
</thead>
</table>
<script>
/* Initialization of datatable */
$(document).ready(function () {
/* Datatable access by using table ID */
$('#tableID').DataTable({
"info": false,
/* Set pagination as false or
true as per need */
"paging": false,
/* Name of the file source
for data retrieval */
"ajax": 'nestedData.txt',
"columns": [
/* Name of the keys from
data file source */
{ "data": "employee_id" },
{ "data": "name" },
{ "data": "designation" },
{ "data": "salary" },
{ "data": "address" },
{ "data": "city" }
]
});
});
</script>
</body>
</html>
nestedData.txt: el siguiente es el contenido del archivo «nestedData.txt» utilizado en el código HTML anterior.
{
"data": [
{
"employee_id": "emp1",
"name": "Teza",
"designation": "Architect",
"salary": "Rs.350,800",
"city": "Lucknow",
"address": "54,komal street"
},
{
"employee_id": "emp2",
"name": "Garima",
"designation": "Accountant",
"salary": "Rs.180,050",
"city": "Hyderabad",
"address": "Hitech city,kodapur"
},
{
"employee_id": "emp3",
"name": "Ashmita",
"designation": "Technical Author",
"salary": "Rs.186,000",
"city": "Kolkatta",
"address": "156, new park,chowk"
},
{
"employee_id": "emp4",
"name": "Celina",
"designation": "Javascript Developer",
"salary": "Rs.450,000",
"city": "Itanagar",
"address": "chandni chowk,new lane"
},
{
"employee_id": "emp5",
"name": "Asha",
"designation": "Accountant",
"salary": "Rs.542,700",
"city": "Tokyo",
"address": "54,Japanese colony"
},
{
"employee_id": "emp6",
"name": "Baren Samal",
"designation": "Integration Specialist",
"salary": "Rs.370,000",
"city": "New Delhi",
"address": "48,RK puram"
},
{
"employee_id": "emp7",
"name": "Hari Om",
"designation": "Sales Manager",
"salary": "Rs.437,500",
"city": "Raipur",
"address": "Sector 6,bhilai"
},
{
"employee_id": "emp8",
"name": "Ranu",
"designation": "Integration Specialist",
"salary": "Rs.330,900",
"city": "Tokyo",
"address": "64,indian colony"
},
{
"employee_id": "emp9",
"name": "Celly",
"designation": "PHP Developer",
"salary": "Rs.275,500",
"city": "Secunderabad",
"address": "23,Sainikpuri"
},
{
"employee_id": "emp55",
"name": "Ama",
"designation": "Director",
"salary": "Rs.985,000",
"city": "kanpur",
"address": "63,Narangi lane"
},
{
"employee_id": "emp56",
"name": "Michael Jackson",
"designation": "C++ Developer",
"salary": "Rs.783,000",
"city": "Singapore",
"address": "53,Sweetpark"
},
{
"employee_id": "emp57",
"name": "Danny",
"designation": "Customer Support",
"salary": "Rs.345,000",
"city": "Ludhiana",
"address": "456,Punjab"
}
]
}
Producción:
Antes de ejecutar el código:
datos de los empleados
Después de ejecutar el código:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA