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 - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(3 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

7 respuestas a “DataTables jQuery plugin”

  1. Juan Pablo dice:

    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!

    • Jose Aguilar dice:

      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

  2. Jorge dice:

    Hola,
    Gracias por el artículo. ¿El contenido de la tabla no debe ir en la etiqueta tbody?

  3. Jorge dice:

    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,

    • Jose Aguilar dice:

      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

  4. Angel dice:

    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»
    }
    }
    });
    } );

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

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

Ver más sobre