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:

<?php
define('DB_SERVER', 'localhost');
define('DB_SERVER_USERNAME', 'YOUR USERNAME');
define('DB_SERVER_PASSWORD', 'YOUR PASSWORD');
define('DB_DATABASE', 'YOUR DATABASE');
 
$connexion = new mysqli(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, DB_DATABASE);
?>

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.

Ver ejemplo en funcionamiento

¿Conoces algún otro plugin que sea interesante para armar buenas tablas? No dudes en enviar tu comentario.

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre