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>

5 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

Deja una 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.