¿Cómo usar DataTables jQuery plugin?

¿Cómo usar DataTables jQuery plugin?. – En este artículo veremos las ventajas de este plugín y cómo usar con la característica serverSide que esta la más recomendada para trabajar con grandes cantidades de información extraídas de MySQL y lo más importante en el menor tiempo posible.

Tabla de contenidos

¿Qué es DataTables y Cómo usar DataTables jQuery?

Datatables es una extensión de jQuery que nos permite generar dinámicas tablas con paginado, búsqueda, ordenar por columnas, etc. En la misma página oficial de datatables tienes múltiples ejemplos que podemos usarlo en nuestros proyectos web.

¿Cómo usar DataTables jQuery?

VENTAJAS DE USAR DATATABLES

Entre las principales ventajas que nos brinda el plugín DataTables son:

Paginación interactiva.
Procesa grandes volúmenes de registros
Herramienta de búsqueda instantánea.
Responsiva para móviles
Se integra con base de datos.
Opciones de descarga e Impresión dinámica
Procesa tablas estáticas y/o dinámicas.
Ordenamiento por columnas
Soporta varias fuentes de datos como: DOM, JavaScript, Ajax, etc.
Se integra fácilmente con jQuery UI, Bootstrap o Foundation.
Traducir a cualquier idioma.

¿Cómo inicializar DataTables correctamente?

Primero: Declarar librerías necesarias

En el HTML debemos incluir los JavaScript necesarios e inicializar nuestra tabla. para ello, se debe de incluir necesariamente dentro de la etiqueta <head>. Sin embargo, la inclusión puede ser archivos descargados desde la página oficial o desde CDN

Usando CDN

Sería una opción para que vuestro servidor no tenga muchas peticiones y pueda ayudarte cuando tengas un tráfico considerable.

<link rel="stylesheet" href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

Librerías descargadas

Si tienes un buen servidor web (VPS o Dedicado) puedes optar por otras alternativas. Como ser descargar los componentes del DataTables.

Además, de no interesarte usar las opciones CDN para tu sitio, puedes descargar o usar los archivos del complemento que más te interese. Donwload.

<link rel="stylesheet" href="/css/jquery.dataTables.min.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>

Aquí más bien tienes que observar las rutas donde se encuentran los archivos.

Segundo: Inicializar la DataTables

Para inicializar la tabla dinámica, debemos de colocar el siguiente código JavaScript (entre los <head> o al empezar el <body> y/o antes de cierre de la etiqueta </body>)

a) Poblar con información estática

Si, nuestra tabla nuestros datos estáticos es decir datos que no cambiaran el siguiente script es idóneo para el ejemplo.

<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>

b) Poblar tabla con base de datos.

Por el contrario, si deseamos que la tabla sea dinámica y que muestre información de MySQL por ejemplo debemos de declarar de la siguiente manera.

$(document).ready(function() {
    $('#myTable').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../server_side/scripts/server_processing.php"
    } );
} );

Es recomendable la opción serverSide por trabaja con grandes volúmenes de información sin problemas.

Tercero: Declarar la tabla

En el segundo paso hemos inicializado la DataTables y el ID se llama «myTable» que debemos de agregar esa ID obligatoriamente a una tabla HTML5 donde queremos que se muestre la información ya sea registros estáticos o dinámicos con conexión a MySQL.

<table id="myTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nombre</th>
<th>Posición</th>
<th>Fecha de inicio</th>
<th>Salario</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nombre</th>
<th>Posición</th>
<th>Fecha de inicio</th>
<th>Salario</th>
</tr>
</tfoot>

<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
</tbody>
</table>

DataTables con ServerSide

Si usamos esta característica nuestra información será visible, mas rápida y eficiente. Vamos a implementar el procesamiento del lado del servidor usando jQuery + ajax + PHP + MySQL + Bootstrap.

Pasos para implementar DataTables serverSide

Primero paso: Crear una base de datos y una tabla
Segundo paso: incluir bibliotecas de DataTables
Tercer paso – Página HTML para Datatables
Cuarto paso: Iniciar el Datatable
Quinto paso: Obtener registros Mysql DB usando Ajax

Estructura de la implementacion serverSide

Paso 1: Crear una base de datos y una tabla

En primer lugar, abra su PHPMyAdmin y ejecute la siguiente consulta MySQL para crear una base de datos y una tabla; Como se muestra abajo:

CREATE TABLE `usuarios` (
  `id` int(11) NOT NULL,
  `nombre` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
  `apellidos` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
  `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `genero` enum('Hombre','Mujer') COLLATE utf8_unicode_ci NOT NULL,
  `pais` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
  `creado` datetime NOT NULL,
  `estado` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Activo | 0=Inactivo'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

-- Volcado de datos para la tabla `usuarios`

INSERT INTO `usuarios` (`id`, `nombre`, `apellidos`, `email`, `genero`, `pais`, `creado`, `estado`) VALUES
(1, 'Lucia', 'Figueroa', 'lucia@miweb.com', 'Mujer', 'Argentina', '2021-12-04 13:28:05', 1),
(2, 'Carlos', 'Mogollon', 'carlos@miweb.com', 'Hombre', 'Argentina', '2021-12-04 17:33:33', 1),
(3, 'Melina', 'Carbajal', 'melina@miweb.com', 'Mujer', 'Ecuador', '2021-12-04 17:33:33', 1),
(4, 'Karina', 'Villaran', 'karina@miweb.com', 'Mujer', 'Chile', '2021-12-04 17:34:46', 1),
(5, 'Julian', 'Lee', 'julian@miweb.com', 'Hombre', 'Ecuador', '2021-12-04 17:34:46', 1),
(6, 'Miguel', 'Cotrado', 'miguel@miweb.com', 'Hombre', 'Bolivia', '2021-12-04 17:34:46', 1),
(7, 'Sujey', 'Cardenas', 'sujey@miweb.com', 'Mujer', 'Uruguay', '2021-12-04 17:34:46', 1),
(8, 'Hector', 'Santander', 'hector@miweb.com', 'Hombre', 'Colombia', '2021-12-04 17:34:46', 1),
(9, 'Valeria', 'Chumpitaz', 'valeria@miweb.com', 'Mujer', 'Chile', '2021-12-04 17:34:46', 1);

ALTER TABLE `usuarios`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `usuarios`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;

Segundo paso: incluir bibliotecas de DataTables

Incluya las bibliotecas jQuery dataTable js y las bibliotecas bootstrap en su archivo index.php; Como se muestra abajo. Recordemos, que estas implementaciones son imprescindibles para que funcione correctamente.

<!-- DataTables CSS library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css"/>

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="//code.jquery.com/jquery-3.5.1.js"></script>
<!-- DataTables JS library -->
<script type="text/javascript" src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<!-- DataTables JBootstrap -->
<script type="text/javascript" src="//cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>

Tercer paso – Página HTML para Datatables

Cree el archivo index.php, que se usa para mostrar datos de la base de datos MySQL usando datatable js; así que agregue el siguiente código en su archivo index.php; Como se muestra abajo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>DataTables Server-side procesado con PHP y MYSQL</title>
<!-- DataTables CSS library -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css"/>

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.5.1.js"></script>
<!-- DataTables JS library -->
<script type="text/javascript" src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<!-- DataTables JBootstrap -->
<script type="text/javascript" src="//cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header clearfix">
<h2 class="pull-left">Lista de Usuarios</h2>
</div>
<table id="listaUsuarios" class="table table-sm table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Email</th>
<th>Genero</th>
<th>Pais</th>
<th>Creado</th>
<th>Estado</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Email</th>
<th>Genero</th>
<th>Pais</th>
<th>Creado</th>
<th>Estado</th>
</tr>
</tfoot>
</table>
</div>
</div> 
</div>
</div>
</body>
<script>
$(document).ready(function(){
$('#listaUsuarios').DataTable({
"processing": true,
"serverSide": true,
"ajax": "extraer.php"
});
});
</script>
</html>

Cuarto paso: Iniciar el Datatables

Es importante generar estas líneas de código para que se inicie nuestra tabla dinámica al cargar el documento HTML. Sin embargo, para dinamizar proceso puede estar también en un fichero .js de javascript.

Si observamos, ("ajax": "fetch.php") está llamando a un fichero PHP que será el encargado de conectar con MySQL y devolver los registros vía json_encode().

<script>
$(document).ready(function(){
$('#listaUsuarios').DataTable({
"processing": true,
"serverSide": true,
"ajax": "extraer.php"
});
});
</script>

Quinto paso: Obtener registros Mysql DB usando Ajax

Cree el archivo extraer.php, su rol será de conectarse con la base de datos MySQL y que se usara para realizar búsquedas en los datos de datos mysql usando Ajax y mostrarlos en su archivo index.php haciendo uso del plugín DataTables.

<?php 
// Database connection info 
$dbDetails = array( 
'host' => 'localhost', 
'user' => 'root', 
'pass' => 'root', 
'db' => 'e_serverside'
); 
// mysql db table to use 
$table = 'usuarios'; 
// Table's primary key 
$primaryKey = 'id'; 
// Array of database columns which should be read and sent back to DataTables. 
// The `db` parameter represents the column name in the database. 
// The `dt` parameter represents the DataTables column identifier. 
$columns = array( 
array( 'db' => 'nombre', 'dt' => 0 ), 
array( 'db' => 'apellidos', 'dt' => 1 ), 
array( 'db' => 'email', 'dt' => 2 ), 
array( 'db' => 'genero', 'dt' => 3 ), 
array( 'db' => 'pais', 'dt' => 4 ), 
array( 
'db' => 'creado', 
'dt' => 5, 
'formatter' => function( $d, $row ) { 
return date( 'jS M Y', strtotime($d)); 
} 
), 
array( 
'db' => 'estado', 
'dt' => 6, 
'formatter' => function( $d, $row ) { 
return ($d == 1)?'Activo':'Inactivo'; 
} 
) 
); 
// Include SQL query processing class 
require 'ssp.class.php'; 
// Output data as json format 
echo json_encode( 
SSP::simple($_GET, $dbDetails, $table, $primaryKey, $columns)
);

Tenga en cuenta que: – La clase SSP maneja las operaciones relacionadas con la base de datos. Contiene algunas funciones auxiliares para crear consultas SQL para el procesamiento del lado del servidor de DataTables.

Conclusión

A través de este tutorial, hemos aprendido cómo implementar el procesamiento del lado del servidor con DataTables usando jQuery + ajax + PHP + MySQL + el framework Bootstrap.

Toda la documentación de este plugin está bien redactada en la página oficial. Ver documentación.

Usando DataTables con serverSide lograremos lo siguiente:

Optimizar las peticiones MySQL,
Ahorro de tiempo en programación
Varias modalidades para peticiones de información
Increíbles características de la librería en proyectos web

Recordemos que, la característica de Serverside y nos puede ayudar a mostrar grandes cantidades de información sin ningún problema.

Un programador web debe optimizar su tiempo y esfuerzo, así como ofrecer a sus clientes las mejores soluciones en desarrollo. Si te gusto el artículo puedes apoyarme compartiendo este post en las redes sociales.

Descargar