Ejemplo de DataTable, Ajax, PHP y MySQL

 in Web Development by

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.

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.