DataTables jQuery plugin
DataTables es un plugin para jQuery que permite agregar en las tablas de tu página Web un aspecto liviano y las funciones para buscar, ordenar y paginar los resultados de forma rápida. Es una herramienta altamente flexible, construida sobre los fundamentos de la mejora progresiva, que permite agregar fácilmente todas estas funciones avanzadas a cualquier tabla HTML.
Este plugin lo hemos usado en varios proyectos y la verdad es que no nos ha ido nada mal. Hemos salido airosos y nos ha ahorrado un tiempo de desarrollo apreciable.
En el ejemplo en funcionamiento vamos a conectar con nuestra base de datos de productos para mostrarlos en una tabla a la que le aplicamos el formato DataTables usando Bootstrap 4. Usaremos PHP y MySQLi para conectar con una base de datos y obtener registros.
Como de costumbre creamos un archivo config.php donde haremos la conexión con la base de datos utilizando MySQLi orientado a objetos:
En el archivo principal, en este caso el index.php en la primera línea haremos una inclusión del fichero config.php, tal como sigue:
<?php require('config.php'); ?>Para que esto funcione, el archivo index.php y config.php deben estar en la misma ruta o directorio.
En la cabecera de la página o dentro de la etiqueta <head> agregamos los estilos y scripts necesarios para hacer funcionar el plugin datatables.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#datatable').DataTable();
} );
</script>En el ejemplo en funcionamiento estamos usando la versión CDN que nos facilita el plugin datatables. Incorporamos su hoja de estilos CSS y el archivo JavaScript. Seguidamente la llamada al plugin con los parámetros por defecto.
En el caso de no interesarte usar las opciones CDN para tu sitio, en la página oficial tienes un apartado para descargar o usar los archivos del complemento que más te interese. Donwload.
Después, dentro del <body> tenemos nuestra tabla con id=»datatable» para adoptar las características que aporta el plugin:
<?php
$result = $connexion->query(
'SELECT * FROM product p
LEFT JOIN product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1)
LEFT JOIN `image` i ON (i.id_product = p.id_product AND cover = 1)
WHERE active = 1
ORDER BY date_upd DESC'
);
?>
<?php if ($result->num_rows > 0) { ?>
<table id="datatable" class="table">
<thead>
<tr>
<th>Nombre</th>
<th>Version</th>
<th>Compatibilidad</th>
<th>Precio</th>
</tr>
</thead>
<?php while ($row = $result->fetch_assoc()) { ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['version']; ?></td>
<td><?php echo $row['compatibility']; ?></td>
<td><?php echo round($row['price'], 2); ?> EUR</td>
...
</tr>
<?php } ?>
</table>
<?php } ?>Como puedes observar, en el código anterior hacemos una consulta de los productos y el resultado lo agregamos en la tabla solo en el caso de que haya registros.
Con este código obtenemos el siguiente aspecto para las tablas que resulta también mucho más elegante:
Toda la documentación de este plugin está bien redactada en la página oficial. Eso si, en inglés. Ver documentación.
Desde mi punto de vista tan solo le puedo poner 2 inconvenientes:
- Aparece siempre en inglés. No hay traducciones. Aunque los textos los puedes cambiar editando los archivos .js que trae la descarga.
- Las flechas de ordenación de registros no ordenan de forma correcta en ocasiones. Por ejemplo, cuando hay números, los considera como cadenas con su respectivo orden incorrecto. Parece ser que el orden que se aplica es alfabético y solo con cadenas de texto.
¿Conoces algún otro plugin que sea interesante para armar buenas tablas? No dudes en enviar tu comentario.
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
Que tal Jose, antes que nada agradecer todo lo que aportas, siempre dan buenos resultados. Te quisiera consultar, estoy viendo que si tengo una base con 100.000 registros por ejemplo tiene que cargar todos las filas para luego armar el paginado, y eso hace generar un demora importante, consultando todo el tiempo crhome si espera o cierra. Yo estoy utilizando otro Datatables con la misma base y no genera esa demora. Sabrias si es que le falta algo para que no pase eso. Desde ya muchas gracias!
Hola Juan Pablo,
Gracias por tu mensaje.
Según mi experiencia, para proyectos con grandes volúmenes no recomiendo el plugin DataTables ya que según pude observar en la documentación se tiene que estar cargando todos los datos en cada paginación y no supe ver como hacerlo simplemente con los elementos paginados.
En proyectos importantes he optado por hacer una paginación usando PHP aunque también lo puedes implementar con jQuery o JavaScript.
Por ejemlo:
https://www.jose-aguilar.com/blog/paginacion-jquery-ajax-php/
Saludos
Hola,
Gracias por el artículo. ¿El contenido de la tabla no debe ir en la etiqueta tbody?
Hola,
Si. Aunque tal y como se muestra en el tutorial ya es funcional, usando la etiqueta tbody sería más correcto. Gracias.
Jose Aguilar,
Saludos
Hola,
Gracias por el artículo. Una duda, veo que después de se incluye el contenido directamente en .
¿No hace falta un antes del ?
Gracias de antemano.
Saludos,
Hola,
Parece ser que no se ha enviado correctamente tu mensaje y no lo podemos entender. Si nos lo puedes enviar de nuevo completo, quizá podemos ayudarte.
Jose Aguilar,
Saludos
Con esto puedes cambiar el lenguaje , espero les sirva
$(document).ready(function(){
$(«.datatable»).DataTable({
language: {
«sProcessing»: «Procesando su consulta…»,
«sLengthMenu»: «Mostrar _MENU_ servicios registrados»,
«sZeroRecords»: «No se encontraron resultados»,
«sEmptyTable»: «No hay servicios para mostrar«,
«sInfo»: «Se estan mostrando servicios del _START_ al _END_ de un total de _TOTAL_ servicios«,
«sInfoEmpty»: «Se estan mostrando servicios del 0 al 0 de un total de 0 servicios»,
«sInfoFiltered»: «(filtrado de un total de _MAX_ registros)»,
«sInfoPostFix»: «»,
«sSearch»: «Buscar Servicio:»,
«sUrl»: «»,
«sInfoThousands»: «,»,
«sLoadingRecords»: «Cargando…»,
«oPaginate»: {
«sFirst»: «Primera»,
«sLast»: «Última»,
«sNext»: «Siguiente»,
«sPrevious»: «Anterior»
},
«oAria»: {
«sSortAscending»: «: Activar para ordenar la columna de manera ascendente»,
«sSortDescending»: «: Activar para ordenar la columna de manera descendente»
}
}
});
} );