El plugin Datatable se puede rellenar usando datos via Ajax nativamente desde las opciones de configuracion, en este articulo veremos el ejemplo de como hacer y como debe estar organizado los datos JSON para mostrarse en la tabla.
Vamos a crear un ejemplo desde CERO por lo que necesitaremos lo siguiente:
- Bootstrap – https://getbootstrap.com/
- Jquery – https://jquery.com/
- Datatables – https://datatables.net/
Al final les dejo el ejemplo completo con los archivos y las librerias.
Este artículo es parte de la Guía de Desarrollo de Sistemas con PHP y MySQL Aprende a construir software profesional desde cero, con estándares de seguridad y arquitectura comercial. Ver la Guía Completa →
Base de Datos
Es importante tener una base de datos a la cual conectarnos, y una tabla con datos para mostrar.
En mi caso usare una base de datos que siempre uso en mis ejemplos.
create database prueba; use prueba; CREATE TABLE `persona` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) DEFAULT NULL, `phone` varchar(255) DEFAULT NULL, `created_at` datetime DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8mb4;
Es una tabla basica para contactos, que tiene 4 campos: id, name, phone, created_at.
Codigo HTML
El codigo HTML es la base, la pagina, el documento de la pagina, donde incluiremos todas las librerias que ya descargamos, el archivo se llamara index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datatables Ajax</title>
<!-- INCLUIR LAS LIBRERIAS -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="datatables/datatables.min.css">
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<br>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- CREAR UNA TABLA PARA MOSTRAR LOS DATOS -->
<table class="table table-responsive table-bordered" id="mytable">
<thead>
<td>Id</td>
<th>Nombre</th>
<th>Telefono</th>
<th>Creacion</th>
</thead>
<tr>
<td>0</td>
<td>Agustin</td>
<td>123</td>
<td>2222-22-22 22:22:00</td>
</tr>
</table>
</div>
</div>
</div>
<!-- SCRIPT PARA ACTIVAR EL PLUGIN DATATABLES -->
<script type="text/javascript" >
$(document).ready(function(){
$("#mytable").DataTable({
ajax: "loaddata.php"
});
});
</script>
<!-- INCLUIR LAS LIBRERIAS QUE FALTAN -->
<script type="text/javascript" src="datatables/datatables.min.js"></script>
</body>
</html>El archivo index.html lo que hacemos es incluir las librerias, crear la tabla que usaremos en datatables, despues activar el plugin datatables, incluir las librerias que faltan y listo.
Al momento de activar el plugin Datatable hacemos llamado a un archivo via ajax, este archivo es loaddata.php que sera el archivo que nos devolvera un paquete de datos JSON para despues ser agregado y mostrado en la vista de la tabla.
Codigo PHP
Ahora vamos a describir el archivo loaddata.php
<?php
// Conectar a la base de datos
$con = new mysqli("localhost","evilnapsis","A123456Z","prueba");
// Crear una variable para almacenar los datos
$data_array = array();
// SQL para obtener los datos
$sql = "select * from persona";
// Ejeuctar el SQL
$query = $con->query($sql);
// Recorrer los resultados
while($data = $query->fetch_object()){
// Poner los datos en un array en el orden de los campos de la tabla
$data_array[] = array($data->id, $data->name, $data->phone, $data->created_at);
}
// crear un array con el array de los datos, importante que esten dentro de : data
$new_array = array("data"=>$data_array);
// crear el JSON apartir de los arrays
echo json_encode($new_array);
?>Es importante en las lineas 12 y 13 colocar los valores en el array en el orden y cantidad que se van a mostrar en la tabla.
Es importante mantener el formato de los arrays, de otra manera no va a funcionar.
Codigo JSON
Este es un ejemplo del resultado JSON que debe retornar el archivo loaddata.php
{"data":[["1","Agustin","9371331142","2022-09-17 10:08:30"],["2","Nombre","Telefono","2022-09-17 10:15:54"],["3","Nombre","934118.149903153","2022-09-17 10:21:07"]]}Y listo ya debe funcionar y cargar los datos de la base de datos via ajax.
Resultado
Este es el resultado.
Descargar
A continuacion el enlace de descarga para las librerias y los archivos del ejemplo.
Link: https://www.dropbox.com/s/da3a3jrnlh4wi4n/datatables1.zip?dl=0
Favor de reportar enlaces caidos, que no funcionen, que redirijan a donde no deben para corregirlos y seguir ayudandoles, se les agradecera.