DataTables es un complemento de jQuery que se puede usar para agregar controles interactivos y avanzados a las tablas HTML de 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 ajax se usa para obtener los datos de la fuente y mostrar el cuerpo de la tabla de varias fuentes, incluida una fuente de datos Ajax, usando este parámetro de inicialización. Después de obtener la referencia del archivo, podemos usar column.data para acceder a la propiedad del objeto especificado.
Sintaxis:
{
"data": [
...
]
}
$('Selector').dataTable( {
"ajax": "data.json"
} );
Valor de la propiedad: esta propiedad acepta tres tipos diferentes de valores que se analizan a continuación:
- string: Se utiliza para establecer la URL de la fuente desde donde se deben cargar los datos.
- objeto: Se utiliza para definir las propiedades de jQuery.ajax.
- función: se utiliza para describir los datos personalizados que se ponen en funcionamiento.
Ejemplo: este ejemplo describe cómo funciona la opción ajax para acceder a los datos del archivo.
Nombre de archivo: geeks.json: este archivo representa los datos en formato JSON.
Javascript
{
"data": [
{
"id": 1,
"name": "Akash",
"address": "Noida"
},
{
"id": 2,
"name": "Deepak",
"address": "Noida"
},
{
"id": 3,
"name": "Rakesh",
"address": "Delhi"
},
{
"id": 4,
"name": "Adarsh",
"address": "Delhi"
},
{
"id": 5,
"name": "Arun",
"address": "Noida"
},
{
"id": 6,
"name": "Aryan",
"address": "Delhi"
},
{
"id": 7,
"name": "Anant",
"address": "Lucknow"
},
{
"id": 8,
"name": "Baba",
"address": "Lucknow"
},
{
"id": 9,
"name": "Bhavesh",
"address": "Lucknow"
},
{
"id": 10,
"name": "Binay",
"address": "Noida"
}
]
}
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>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>DataTables ajax Option</h3>
</center>
<table id="tableID" class="display">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
</table>
<script>
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').dataTable({
"ajax": "geeks.json",
"columns": [
{ 'data': 'id' },
{ 'data': 'name' },
{ 'data': 'address' }
]
});
});
</script>
</body>
</html>
Producción:
Referencia: https://datatables.net/reference/option/ajax