Datatables: listando y filtrando tablas de datos con Javascript

Datatables simple, cargando desde HTML los datos
Proyecto de pruebas en el que se listan sitios web bajo estudio SEO.

Ya estoy de nuevo por aquí compartiendo una verdadera joya del software, el Datatables. Esta es una herramienta para desarrollo frontend, que mediante Javascript, crea unas tablas de datos muy profesionales para tus proyectos en muy poco tiempo. Se trata de un plugin de jQuery, que le da vitaminas a la presentación de datos en el navegador del cliente.

Javascript actúa en la parte de frontend, es decir, tenemos que enviarle al navegador el HTML, CSS y Javascript con el Datatable configurado. Entonces, en el navegador del cliente, mediante Javascript, se regenerará el contenido web de la tabla para hacer los listados, ordenados y filtrados de la tabla de datos.

¡Ojo! Que esta herramienta no es SEO friendly, así que si quieres posicionar el contenido de estas tablas no debes de usarla en las zonas de la web públicas que quieras posicionar. Me viene a la mente aquellos años en que hablando con amigos nos reíamos diciendo: “¡El futuro es el Javascript!” xDDD Al final resulta que Javascript está dando mucho que hablar, y lo seguirá haciendo..

Cómo funciona, listando, ordenando y filtrando

Una vez configurado, debería de verse una tabla como la de la imagen siguiente:

Datatables simple, cargando desde HTML los datos 2
Datatables simple, cargando desde HTML los datos.

Mira que puedes filtrar por columnas, filtrar buscando en todas las columnas, genera un paginador, número de items por página.. incluso te genera PDF, CSV, Excel para descargar los datos de la tabla que tengas filtrados en ese momento. ¡Una verdadera joya del Javascript!

Librerías en la cabecera necesarias

Datatables depende de jQuery. Necesita de incluir de un fichero Javascript y otro CSS para que funcione. Si quieres usar más añadidos tendrás que ponerle más ficheros. Para el ejemplo, unos ficheros en el HEAD de la web pueden ser usando CDNs:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Hello DefaultController!</title>
        
        <!-- Required meta tags -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>

        <!-- Datatables -->
        <link rel="stylesheet" href="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.18/datatables.min.css">
        <script src="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.18/datatables.min.js"></script>
    </head>
    <body class="container-fluid p-5">

Al final del post dejo enlace a todas las webs de proyectos y donde puedes descargarte todas las librerías.

El contenido de la tabla

Ahora en el BODY toca poner el contenido con los datos. Esta es la forma más sencilla, simplemente se ponen a pelo los datos en una tabla. Yo lo he claseado con Bootstrap para que quede todo bonito:

<div class="table-responsive" id="mydatatable-container">
    <table class="records_list table table-striped table-bordered table-hover" id="mydatatable">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
                <th>Column 7</th>
                <th>Column 8</th>
                <th>Column 9</th>
                <th>Column 10</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Filter..</th>
                <th>Filter..</th>
                <th>Filter..</th>
                <th>Filter..</th>
                <th>Filter..</th>
                <th>Filter..</th>
                <th>Filter..</th>
                <th>Filter..</th>
                <th>Filter..</th>
                <th>Filter..</th>
            </tr>
        </tfoot>
        <tbody>
           <tr>
                <td>item 0 0</td>
                <td>item 0 1</td>
                <td>item 0 2</td>
                <td>item 0 3</td>
                <td>item 0 4</td>
                <td>item 0 5</td>
                <td>item 0 6</td>
                <td>item 0 7</td>
                <td>item 0 8</td>
                <td>item 0 9</td>
            </tr>
            <tr>
                <td>item 1 0</td>
                <td>item 1 1</td>
                <td>item 1 2</td>
                <td>item 1 3</td>
                <td>item 1 4</td>
                <td>item 1 5</td>
                <td>item 1 6</td>
                <td>item 1 7</td>
                <td>item 1 8</td>
                <td>item 1 9</td>
            </tr>
            <tr>
                <td>item 2 0</td>
                <td>item 2 1</td>
                <td>item 2 2</td>
                <td>item 2 3</td>
                <td>item 2 4</td>
                <td>item 2 5</td>
                <td>item 2 6</td>
                <td>item 2 7</td>
                <td>item 2 8</td>
                <td>item 2 9</td>
            </tr>
/*          
Etcétera.. Aquí añade todas las filas de la tabla que quieras.
*/
        </tbody>
    </table>
</div>

Cerrando la página con algo de estilo y el Javascript

Queda lo siguiente, que convierte en interactiva la tabla:

<style>
#mydatatable tfoot input{
    width: 100% !important;
}
#mydatatable tfoot {
    display: table-header-group !important;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
    $('#mydatatable tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Filtrar.." />' );
    } );

    var table = $('#mydatatable').DataTable({
        "dom": 'B<"float-left"i><"float-right"f>t<"float-left"l><"float-right"p><"clearfix">',
        "responsive": false,
        "language": {
            "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json"
        },
        "order": [[ 0, "desc" ]],
        "initComplete": function () {
            this.api().columns().every( function () {
                var that = this;

                $( 'input', this.footer() ).on( 'keyup change', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                        }
                });
            })
        }
    });
});
</script>
</body>
</html>

Con algo de estilo y algunas configuraciones en el Javascript, que tiene que verse algo como la tabla siguiente:

Proyecto de pruebas listando 1000 líneas de datos.

Terminando, enlaces a páginas de proyectos, bibliografía

Sólo me queda enlazarte a las webs de los proyectos. Si has llegado hasta aquí puedas seguir investigando para hacer funcionar Datatables en tus proyectos. Siempre he sido muy reticente a usar Datatables en las webs que visitan los buscadores, pero cuando se trata de paneles de control y quieres darle al usuario la máxima interactividad, que no he encontrado nada mejor.

Otro día más.. ¡Un saludo!

Compartir..

Dejar un comentario

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

veinte + 17 =