Datatables con botones para CSV, Excel, PDF e imprimir

2021-01-10 - Categorías: JavaScript
Datatables con botones

Comparto un script aquí de copia y pega con un Datatables en una web que tiene filtros y los botones. Con estos botones de Datatables de este script se puede después de haber filtrado entre los datos, descargar un fichero CSV con dichos datos, también en formato Excel, en PDF o enviar a imprimir.

Al grano, el código fuente funcionando

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Hello Datatables with buttons!</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>

    <!-- Buttons -->
    <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>

    <style>
        #mydatatable tfoot input {
            width: 100% !important;
        }

        #mydatatable tfoot {
            display: table-header-group !important;
        }
    </style>
</head>

<body class="container-fluid p-5">
    <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>
            </tbody>
        </table>
    </div>



    <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();
                            }
                        });
                    })
                },
                "buttons": ['csv', 'excel', 'pdf', 'print']
            });
        });
    </script>
</body>

</html>

36 respuestas a “Datatables con botones para CSV, Excel, PDF e imprimir”

  1. rubi dice:

    En el caso de que el filtro, se quiera hacer por un periodo de fechas ejemplo de 1 enero hasta el 20 de enero y que solo me aparezcan todo ese periodo, ¿como se podria?

  2. SrPikels dice:

    Hola buenas Jnj,
    Gracias por el post, me ha servido de mucha ayuda.
    Seria posible que enseñaras a cambiar de ubicación los botones, no he sido capaz trasteando.

    Saludos!

    • Jnj dice:

      Hola SrPikels!
      De nada, muchas gracias por dejar un comentario. El parámetro dom es el que posiciona las cosas de Datatables. Podrías probar poniendo el parámetro así:
      ..
      «dom»: «lfrtip»
      ..
      En el post está puesto así:
      ..
      «dom»: ‘B<"float-left"i><"float-right"f>t<"float-left"l><"float-right"p><"clearfix">‘
      ..
      Porque la B es de los botones, la i de la información, la f es del filtro, la t es de la tabla, la l es del largo de la tabla, la p es de los botones de páginas. Todo lo demás que he puesto en el post es para poner clases y así puedes darles estilo con CSS. Puedes cambiarles el orden y verás los resultados al recargar la página.
      No se si me explico bien. En la documentación oficial veo que está mucho más detallado con casos de ejemplo:
      https://datatables.net/reference/option/dom

  3. Jeferson dice:

    Hola, muchas gracias, fuciona de maravilla.
    Tengo una consulta, si agrego un nav este queda pegado a la tabla, como podría ponerlos separados? Que el nav no haga parte de la tabla.

    Saludos!

    • Jnj dice:

      Hola Jeferson!
      De nada, gracias por dejar un comentario!
      Si el nav lo estás poniendo arriba le puedes poner con CSS margin-bottom: 123px; o a la tabla un margin-top:123px; por ejemplo.
      Un saludo.

  4. toño dice:

    me funciono de maravilla el código muchas gracias, me pudiera apoyar a realizar lo que seria un filtro pero de columnas que pueda ocultar o mostrar según la columna que seleccionen.

    • Jnj dice:

      Hola Toño!
      Muchas gracias por dejar un comentario! Podemos mostrar o esconder columnas usando JavaScript, por ejemplo si usamos:
      table.columns(0).visible(false);
      ..esconderá la primera columna, si usamos:
      table.columns(1).visible(false);
      ..esconderá la segunda columna. Así entonces se pueden poner botones o enlaces para que escondan o muestren las columnas.
      Un saludo.

  5. Jeferson dice:

    Hola, muchas gracias, me sirvió de mucho.
    Tengo un problema y es que cuando descargo la tabla en excel, al parecer cambia el formato de las columnas, meagrega ceros a algunos valores y me cambia la posición de la coma en otros, como pidría solucionar esto?

    Saludos!

    • Jnj dice:

      Hola Jeferson!
      De nada, muchas gracias por dejar un comentario!
      Parece cuestión de configuración de los números, el formato decimal con puntos o comas, creo que es configuración de Excel. Podrías probar con LibreOffice que tiene más opciones a la hora de abrir los ficheros de Excel y descartas posibilidades. Si se ve bien en LibreOffice al probar, entonces seguro que será cuestión de configurar Excel.
      Saludos.

      • Jeferson dice:

        Hola, muchas gracias por tu respuesta, ya intenté los dos formatos pero no, sigue igual, la tabla tiene este información
        ‘NIT’: #########,
        ‘EMPRESA’: ‘dfsdfsdf’,
        ‘CUENTA’: ‘1111111111111111111’,
        ‘VALOR_DE_LA_TRANSACION’: -3100.0,
        ‘NUMERO_DE_LA_AUTORIZACION’: ‘ ‘,
        ‘CODIGO_TRX’: 711.0},

        esta es la info que le llega a la tabla, la tabla me la muestra tal cual, pero al descargarlo en excel, redondea la cuenta, en los ultimos cuatro digitos pone 0s, queda así 1111111111111110000
        además el valor de la transacción queda en -31000

  6. Arnol dice:

    Hola buen día Jeferson!

    El código de Js me podría funcionar para trabajarlo con VB.Net?

  7. Daniela dice:

    Buenas, tengo un datatable que lee los datos de la Base de datos, pero cuando quiero descargar en excel sólo me descarga un sólo 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();
    %>

    • Jnj dice:

      Hola de nuevo Daniela!
      No se si te puedo ayudar, pero creo que los botones de descargar del Datatables tienen de especial que sólo descargan lo que se está visualizando actualmente. Quizá es lo que te está pasando?¿
      Saludos.

  8. JEPE dice:

    Hola, pero donde es la parte del html que se agregan los botones de export o print que no los veo?

  9. carlos Diaz dice:

    hola, gracias por este tema, me ha servido demasiado, lei los comentarios y me sucede igual que solo me filtra el primer registro. manejo una db de 500 mil registros los filtro mediante un input pero cuando quiero utilizar el script de filtros solo me lee el primer registro visible de 30 visibles que tengo en la pantalla. a que se debe.

    • Jnj dice:

      Buenos días Carlos!

      Muchas gracias por dejar un comentario!

      Creo que está petando el navegador con 500 mil registros, es normal, con tantos registros conviene llevar la lógica de filtros al servidor procesando mediante AJAX. Aquí hay un post relacionado que hice hace un tiempo, las ideas generales aplican para cualquier lenguaje:
      https://jnjsite.com/datatables-y-symfony-cargando-tablas-con-cantidades-ingentes-de-datos/

      La idea con 500 mil registros, es que envías mediante AJAX la petición al servidor, y en el servidor filtra los registros que corresponden, devolviendo sólo los datos que casan con el filtro en la página actual.

      Si ya estás cargando mediante AJAX los datos, entonces hay que hacer debug de las peticiones y respuestas a ver qué está ocurriendo que sólo tenemos 1 registro de resultado.

      Espero que sirva de ayuda, aquí hay más en la documentación oficial:
      https://datatables.net/examples/ajax/simple.html

      Saludos.

  10. Osvaldo M. dice:

    Excelente aporte, como puedo agregar alguna funcionalidad para de inicio ocultar ciertas columnas y que posteriormente el usuario pueda mostrar o abrir todo el abanico de columnas.

    Gracias

  11. Saúl Hernández Aguilar dice:

    Hola Compañeros, gracias por el POST me sirvió muchísimo, y les quiero dejar la solución de un pequeño error que encontré en esta parte: if (that.search() !== this.value) yo lo cambie por == porque allí esta diciendo si no es igual, y debería ser si es igual (==) solo quiten la negación y listo.

  12. Francisco dice:

    Hola, en primer lugar muchisimas gracias, en segundo lugar tengo el problema de que al filtrar, cuando le doy a imprimir (O generar excel) me genera excel y/o me imprime toda la tabla, no solo el filtro, ¿Como debo hacerlo? Gracias

  13. DZ dice:

    Hola, gracias por el post..
    una consulta necesito que dos DataTables en el form, carguen con la misma configuración de orden, filtrado y eso…
    como sería el javascript?

    • Jnj dice:

      Hola DZ.
      No hay de qué, gracias por dejar un comentario.
      En la línea donde se inicializan los dos DataTables le puedes pasar la misma configuración. La configuración es lo que tenemos entre llaves:
      var table1 = $(‘#mydatatable1’).DataTable({/* configuración */});
      var table2 = $(‘#mydatatable2’).DataTable({/* configuración */});
      Saludos.

  14. sergio dice:

    hola, como puedo hacer para que no aparezca el «Mostrando registros del 1 al 7 de un total de 7 registros». O por lo menos cambiarle de color.

    • Jnj dice:

      Hola Sergio.
      Ese texto informativo lo puedes editar con CSS como cualquier otro contenido. También lo puedes quitar si lo quitas de la configuración del Datatables en el parámetro «dom». Se corresponde con la configuración donde pone <«float-left»i>. La i se corresponde con esta información, tenemos ‘B<«float-left»i><«float-right»f>t<«float-left»l><«float-right»p><«clearfix»>’, la B son los botones, la f es el buscador, la t es la tabla, etc..
      Saludos.

  15. sergio rojas dice:

    Buenos dias, mira que quiero reutilizar el codigo pero quiero que hereden de una plantilla base. Pero ya cuando la pongo a heredar no funcionan los filtros y el filtro general no aparece.
    Estoy utilizando jinja2.

    • Jnj dice:

      Buenas tardes Sergio.
      En teoría si pones ‘display: none;’ al classpath ‘.dataTables_info’ desaparecería también la información. No conozco Jinja2 pero se tiene que poder hacer.
      Saludos.

Responder a sergio rojas Cancelar la respuesta

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

 

© 2024 JnjSite.com - MIT license

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