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!

52 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.

  13. Alda dice:

    Hola, ¿sabe como agregarle este buscador y filtro a un dataframe de python?
    Ya que me llega desde python ya en html con to.html() pero no me detecta esta funcion de javascript

    • Jnj dice:

      Buenas tardes Alda!
      En teoría debería de funcionar añadiendo mediante JavaScript lo que le falta a los tags de HTML en el navegador. Es decir, puedes hacer un pequeño programa en JavaScript que configure el Dataframe desde el navegador, y en ese momento lanzar Datatables.
      Saludos.

  14. Jonathan dice:

    hola, antes que nada, muchas gracias por el aporte, me ha servido demasiado, pero tengo un pequeño problema, el filtro me aparece al final de la tabla, en vez de aparecerme al principio(debajo del titulo), cual debe ser mi error?

    • Jnj dice:

      Hola Jonathan!
      Parece que te falta configurar el parámetro dom cuando se inicializa el Datatables:
      «dom»: ‘B<«float-left»i><«float-right»f>t<«float-left»l><«float-right»p>clearfix»>’,
      La t es la tabla, la f es el filtro.
      Muchas gracias por dejar un comentario!

      • jonathan dice:

        Muchas gracias por responder, pero al final mi error era porque no había agregado los estilos al css, una vez que los agregue funcionó súper bien.
        Lo que si estoy buscando es como se puede hacer para que uno de los campos de búsqueda sea un input tipe=date, en mi casi en en la columna 3, ([2]), si me puedes ayudar sería genial, pero independiente de eso muchas gracias por el aporte, demasiado útil

  15. Aila dice:

    Hola! Gracias por toda la info, necesito hacer una busqueda multiple(tipo select) pero no veo nada que hable de esto y he probado a buscar por varios valores(se los paso al .search(‘value1’, ‘value2’)) y no me da resultado, hay alguna forma de hacer busqueda multiple con la librería?

  16. Salvador dice:

    Hola! Tengo dos problema al listar las tablas que resumo en lo siguiente, ¿Podéis ayudarme?

    – Los botones de Siguiente y Anterior se ven muy pequeños con respecto a la letra. Osea, el botón mide X y la palabra Anterior y Siguiente se sale de los bordes y hace que la tabla no quepa en su zona, ¿Cómo puedo modificar el tamaño o el texto de los botones?
    – ¿Es posible poner por defecto el numero de filas mostradas y que no sea el que viene por defecto a 10?

    • Jnj dice:

      Hola Salvador!
      El tamaño de los botones o del texto lo puedes editar usando estilos en CSS.
      El tamaño de filas se define al iniciar el Datatables con un atributo, por ejemplo para poner 20 filas pondríamos «pageLength»: 20. Para cambiar las selecciones posibles usando el atributo lengthMenu. Espero que te guíe bien, en la documentación oficial del Datatables están muy bien explicados estos atributos.
      Saludos.

  17. JUAN JOSE dice:

    Cordial saludo,

    Gracias me fue muy util, queria preguntarte hay manera de en la misma tabla, insertar y editar informacion?

    • Jnj dice:

      Hola Juan José!
      No hay de qué, muchas gracias por dejar un comentario.
      Hay un plugin de pago, de la misma empresa Datatables, con el que se pueden hacer ediciones en la misma tabla.
      Saludos.

      • JUAN JOSE dice:

        A listo voy a mirar, y otra consulta.. hay forma de determinar el ancho de las columnas? o ya toca con css?.

        • Jnj dice:

          No veo ahora mismo cómo hacer eso, parece que vienen definidos los anchos por JavaScript marcando el HTML con style=»width: ..
          En teoría con CSS se tiene que poder.
          Saludos Juan José.

  18. Sarahi dice:

    Hola! Gracias por la información, pero tengo una duda.

    En mi tabla yo no tengo nada en el tbody, ya que tengo unos input y con javascript lo que vaya poniendo en ellos mediante un botón la información se agrega a la tabla, ¿Cómo podría hacer que me detecte que hay contenido en la tabla? Gracias.

    • Jnj dice:

      Buenas tardes Sarahi.
      De nada, gracias por dejar un comentario.
      En la variable que almecene la tabla puedes hacer table.rows().data() y obtienes todos los datos que haya en ese momento de contenido.
      Saludos.

  19. Juan Antonio dice:

    Buen ejemplo detallado. Pero mi problema es que me piden que la busqueda sea exactamente lo que se pone en el search, no que contengan la cadena

    • Jnj dice:

      Buenos días Juan Antonio.
      No lo sé cómo se hace, en teoría puedes recorrer las filas de la tabla, dibujándolas si son la cadena de búsqueda o no.
      Saludos.

  20. DoctorBarroco dice:

    Hola, faltástico artículo.

    ¿Hay alguna manera de poner una columna (por ejemplo la primera) que no muestre ni nombre de columna ni el campo de filtrado?

    • Jnj dice:

      Buenas tardes Doctor Barroco.
      Muchas gracias por dejar un comentario.
      Con respecto al filtrado lo puede editar en la función JavaScript donde se añaden los filtros:
      $(‘#mydatatable tfoot th’).each( function () {
      ..poniéndole una clase al selector ‘#mydatatable tfoot th.filtrando’ por ejemplo y en el tag <th class=»filtrando»>Filtrar..</th>
      El nombre de columna lo puedes cambiar o quitar simplemente cambiando el tag <th>Column 1</th>
      Saludos.

  21. Enrique dice:

    Hola, gracias por el tutorial. Consulta, como hago para modificar ese texto que dice «Buscar:» que precede al casillero para filtrar la tabla? Necesito aclarar ese texto. Gracias desde ya.

    • Jnj dice:

      Hola Enrique.
      De nada, gracias por dejar un comentario. Se le pasa en la configuración cuando lo inicializas:
      var table = $(‘#mydatatable’).DataTable({
      ..resto de configuraciones..
      «oLanguage»: {
      «sSearch»: «Texto que aparece con la búsqueda»
      }
      });
      Saludos.

  22. MANUEL TROYANO DIAGO dice:

    Hola:

    Buen post. Me gustaría saber como quitar los filtros establecidos con un botón sin necesidad de ir borrando manualmente uno por uno los campos de filtro, y reiniciar nuevamente el Datatable con los filtros en blanco

    • Jnj dice:

      Hola Manuel.
      Muchas gracias por dejar un comentario.
      En el botón que quires añadir puedes llamar a lo mismo que se hace en la carga de la web, lo que hay dentro del código:
      $(document).ready(function() {
      ..
      Lo mejor sería crear una función que haga todo eso, y la llamas dos veces: una en la carga de web (en el document.ready que te indico), y la segunda vez en el botón al que quieres llamar. Debería de funcionar. Espero que sirva de ayuda.
      Saludos.

Deja una respuesta

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

 

© 2022 JnjSite.com - MIT license

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