Datatables: listando y filtrando tablas de datos con Javascript

2019-02-11 - Categorías: General / 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..

Si has llegado a este post, también te puede interesar este otro relacionado sobre DataTables y Symfony.

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.

Si has llegado a este post, también te puede interesar este otro relacionado sobre DataTables y Symfony.

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

28 respuestas a “Datatables: listando y filtrando tablas de datos con Javascript”

  1. Jorge dice:

    Me ayudo mucho, gracias

  2. matias dice:

    como hago para agregarle los botones de pdf, excel e impresion? xq cuando quiero agregarlo me desaparece el filtro. gracias

    • Jnj dice:

      Se puede hacer añadiendo lo siguiente en la cabecera:

      <link rel=»stylesheet» href=»https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css»>
      <script src=»https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js»></script>
      <script src=»https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js»></script>
      <script src=»https://cdn.rawgit.com/bpampuch/pdfmake/0.1.53/build/pdfmake.min.js»></script>
      <script src=»https://cdn.rawgit.com/bpampuch/pdfmake/0.1.53/build/vfs_fonts.js»></script>
      <script src=»https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js»></script>
      <script src=»https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js»></script>
      <script src=»https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js»></script>

      Y en el script del pie de página con lo siguiente añadido dentro de la inicialización del Datatables:

      «buttons»: [
      ‘csv’,
      ‘excel’,
      ‘pdf’,
      ‘print’
      ]
      Espero que sirva. Si te desaparecen los filtros será por alguna otra razón.

      Un saludo Matias!

      • Neptalí Intriago dice:

        Favor su ayuda, estoy intentado poner los botones para exportar a excel, pdf, pero no se muestran en pantalla:

        Esta es la linea que agtegue: «buttons»: [‘csv’, ‘excel’, ‘pdf’, ‘print’]

        lo estoy haciendo de esta forma:

        var table = $(‘#mydatatable’).DataTable({
        «dom»: ‘Bt’,
        «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();
        }
        });
        })
        },
        «buttons»: [‘csv’, ‘excel’, ‘pdf’, ‘print’]
        });

        Muchas gracias por su ayuda

      • Matias dice:

        Muchas gracias! Me sirvió

  3. carlos dice:

    Excelente he buscado esto por dias y es claro y preciso , muy agradecido por el aporte

  4. rubi dice:

    Muchas Gracias, Genio

  5. jair dice:

    disculpa pero como se le hace para que los datos sean editables y se guarden en una base de datos? gracias.

    • Jnj dice:

      Hola Jair!
      Los creadores de Datatables venden un plugin para hacer eso, el Editor de Datatables se llama. Alternativamente puedes poner enlaces o botones en las filas, para así cargar formularios con los datos de la fila, luego haces submit y envías los datos a guardar.
      Un saludo.

  6. rafael dice:

    Buenas una pregunta , tengo una tabla con Data table , al momento de cargar se ordena por nombres pero tengo una columna de activo y desactivado, quisiera q se ordenen por activos y despues por el nombre Muchas Gracias de antemano

  7. Jonathan Rodriguez dice:

    Muchas gracias CRACK de CRACKS esto me sirvió mucho y muy buena documentación para poder entender el código

  8. Salvador dice:

    Hola,

    Espectacular lo que has dejado aquí, me encanta. ¿Alguna forma de poder ayudar?

    Estoy buscando que sea responsivo, que las columnas se vayan adaptando a la pantalla y evitar que sea muy grande (Columnas con diferente ancho). ¿Hay alguna forma de hacerlo?

    Un slaudo,

    • Jnj dice:

      Hola Salvador!
      El Datatables tiene una configuración para activar el responsive. Luego también con CSS y JavaScript usando Bootstrap se pueden conseguir buenos resultados.
      Muchas gracias por dejar un comentario.
      Saludos.

  9. Bryan dice:

    Hola felicidades por el post es muy bueno y se explica todo muy entendible una consulta estoy intentando hacer que el filtro quite los registros que tengan el valor buscado intente con row().delete(); pero no lo consigo talvez tienes alguna idea de como hacerlo
    Saludos y gracias

    • Jnj dice:

      Hola Bryan! Muchas gracias por dejar un comentario!
      Si la tabla la almacenas en una variable visible en la página, por ejemplo llamada ‘table’, luego puedes hacer algo como lo siguiente:
      table.rows(0).remove().draw();
      ..que borraría la fila 0 y volvería a pintar la tabla. Creo que te ha faltado el draw() después del borrado.
      Saludos.

  10. Daniela dice:

    Tengo una Datatable que lee los datos de un DB (oracle), al tratar de descargar en excel o pdf, solo me descarga un registro.

    $(document).ready(function() {
    $(‘#example’).DataTable({
    «scrollY»: «400px»,
    «scrollCollapse»: true,
    «paging»: false,
    «searching»: false,
    «ordering»: false,
    dom: ‘Bfrtip’,
    buttons: [
    ‘excelHtml5’,
    ‘pdfHtml5’,
    ]
    });
    });

    HTML

    <%
    MostrarTablaDao tablaDao = new MostrarTablaDao();
    List list = tablaDao.barCharData();
    Iterator iter = list.iterator();
    Tabla tabla = null;
    int i = 0;
    while (iter.hasNext()) {
    tabla = iter.next();

    %>

  11. carlos Diaz dice:

    Hola,

    gracias por tu ejemplo me ha servido hasta el momento, solo me genera una duda o error trabajo con una tabla de mas de 1 registros, pero solo me muestra 1 registro de 1 no filtra màs……… a que se debe ???

    • Jnj dice:

      Hola Carlos!
      No se merecen 👍 Parece que el bucle que pinta los datos en la tabla no esté correcto. O el HTML que lo contiene pueden no casar bien las etiquetas.
      Saludos.

  12. Zamantha dice:

    Buen Dia Jnj

    Excelente post, una consulta soy nueva en este mundo; estoy llamando un archivo .csv pero cuando lo cargo (por medio de un button + script) no se vincula con tu codigo (la info queda arriba y tu estructura de tabla filtros y demas queda abajo) y no me deja utilizar las herramientas de tu codigo como filtrar, descargar o imp. Me podrias por favor orientar un poco como arreglarlo. Muchas gracias.

    • Jnj dice:

      Buenos días Zamantha!

      Muchas gracias por dejar un comentario!

      Imagino que estás siguiendo esta ayuda de la documentación oficial: https://editor.datatables.net/examples/extensions/import.html
      ..creo que hay que depurar el JavaScript para ver qué está pasando. Si el HTML es correcto, entonces hay que mirar el JS. Puedes probar primero con pocos datos a ver qué pasa. En Chrome el inspector de código ayuda mucho, si tienes el JavaScript en fichero aparte podrás incluso editarlo en el mismo navegador con el inspector de la página, y volver a ejecutar el botón que indicas de cargar, poniendo puntos de interrupción para ver, paso a paso, qué ocurre. No se si me explico bien, en la página que estás construyendo le das click derecho, inspeccionar, y tendrás muchas utilidades, algunas relacionadas con el JS para depurarlo me refiero.

      Otra opción si te animas es cargar mediante AJAX el contenido de la tabla, procesando el CSV mediante PHP por ejemplo, y enviando al navegador la página que corresponde, pero esto añade complejidad. Si el CSV es muy grande directamente puede que no haya otra solución, porque se peta el navegador si carga muchos datos. Aquí tienes algo de código hecho en Symfony, la idea es la misma para sólo PHP, Java, u otro lenguaje: https://jnjsite.com/datatables-y-symfony-cargando-tablas-con-cantidades-ingentes-de-datos/

      Saludos.

Responder a Jorge Cancelar la respuesta

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

 

© 2021 JnjSite.com - MIT license

Sitio hecho con WordPress, diseño y programación del tema por Jnj.