DataTables es un complemento moderno de jQuery para agregar controles interactivos y avanzados a las tablas HTML de nuestra página web. Es un complemento fácil de usar con muchas opciones para los cambios personalizados del desarrollador. Las características comunes de DataTables son ordenar, ordenar, buscar y paginar.
DataTables puede leer fácilmente la información de las columnas de cualquier array o fuente de datos JSON anidada. El desarrollador puede probar muchas opciones según las necesidades de la aplicación.
Los archivos precompilados necesarios para la implementación del código son los siguientes.
JavaScript:
https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
Ejemplo: El siguiente ejemplo demuestra la carga Ajax de objetos de datos JSON anidados en DataTables con procesamiento del lado del cliente. La opción utilizada es la propiedad column.data .
Los siguientes son los datos anidados para muchos usuarios con sus detalles como nombre, dirección, designación y salario. Estos datos de ejemplo se utilizan en el siguiente código.
Nombre de archivo: anidadoJSONdata.txt
{
"data": [
{
"name": "Tina Mukherjee",
"details": {
"designation": "BPO member",
"salary": "300000"
},
"address": [
"24,chandni chowk",
"Pune"
]
},
{
"name": "Gaurav",
"details": {
"designation": "Teacher",
"salary": "100750"
},
"address": [
"esquare,JM road",
"Pune"
]
},
{
"name": "Ashtwini",
"details": {
"designation": "Junior engineer",
"salary": "860000"
},
"address": [
"Santa cruz",
"mumbai"
]
},
{
"name": "Celina",
"details": {
"designation": "Javascript Developer",
"salary": "430060"
},
"address": [
"crr lake side ville",
"tellapur"
]
},
{
"name": "Aisha",
"details": {
"designation": "Nurse",
"salary": "160000"
},
"address": [
"rk puram",
"Delhi"
]
},
{
"name": "Brad henry",
"details": {
"designation": "Accountant",
"salary": "370000"
},
"address": [
"chaurasi lane",
"Kolkatta"
]
},
{
"name": "Harry",
"details": {
"designation": "Salesman",
"salary": "130500"
},
"address": [
"32, krishna nagar",
"Navi mumbai"
]
},
{
"name": "Rhovina",
"details": {
"designation": "Amazon supporter",
"salary": "300900"
},
"address": [
"Aparna zone",
"hyderabad"
]
},
{
"name": "Celina",
"details": {
"designation": "Senior Developer",
"salary": "200000"
},
"address": [
"23, chandni chowk",
"pune"
]
},
{
"name": "Glenny",
"details": {
"designation": "Administrator",
"salary": "200500"
},
"address": [
"Nagpur",
"Maharashtra"
]
},
{
"name": "Brad Pitt",
"details": {
"designation": "Engineer",
"salary": "100000"
},
"address": [
"sainikpuri",
"Delhi"
]
},
{
"name": "Deepa",
"details": {
"designation": "Team Leader",
"salary": "200500"
},
"address": [
"Annanagar",
"Chennai"
]
},
{
"name": "Angelina",
"details": {
"designation": "CEO",
"salary": "1000000"
},
"address": [
"JM road",
"Aundh pune"
]
}
]
}
Nombre de archivo: index.html
HTML
<!DOCTYPE html>
<html lang="en">
<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>Handling nested objects using jQuery Datatables </h2>
<!--HTML tables with user data-->
<table id="tableID" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Address</th>
<th>City</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script>
// Initialization of datatables
$(document).ready(function () {
$('#tableID').DataTable({
"processing": true,
"ajax": "nestedJSONdata.txt",
"columns": [
{ "data": "name" },
{ "data": "details.designation" },
{ "data": "address.0" },
{ "data": "address.1" },
{ "data": "details.salary" }
]
});
});
</script>
</body>
</html>
Error común: el error muy común que ocurre en DataTables es una respuesta JSON no válida. Cuando las tablas de datos se cargan con datos, espera un JSON válido. Si encuentra datos no válidos en la estructura JSON, lanza la siguiente advertencia.
DataTables warning: table id={tableID} - Invalid JSON response
Donde tableID es la identificación de la tabla HTML como en la implementación del código anterior.
Salida: la siguiente salida se muestra en el caso de JSON válido.
- Antes de la ejecución:
- Después de la ejecució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