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>
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?
En la función $(document).ready(function () habría que inyectar otra caja input para tener así 2, una para la fecha desde y la fecha hasta. Luego en el on(‘keyup change’.. se puede hacer la búsqueda en el Datatables. Aquí hay más documentación: https://datatables.net/reference/api/search()
Creo que usando expresiones regulares se debería poder hacer, es el segundo parámetro de la función search(), usando los inputs.
Saludos Rubi!
Hola de nuevo Rubi! Jugando un poco con JavaScript he dejado un post nuevo filtrando entre fechas..
https://jnjsite.com/datatables-filtrando-entre-rangos-de-fechas-por-columnas/
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!
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
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!
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.
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.
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.
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!
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.
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
Hola Jeferson!
Estoy viendo en el foro oficial de Datatables que esto puede ser la solución:
https://datatables.net/forums/discussion/40503/excel-export-and-comma-decimal
Saludos.
Muchas gracias,
con eso pude solicionarlo, con exportOptions y format cambio las comas (,) por puntos (.).
Saludos.
Genial! De nada, y gracias por dejar un comentario!
Hola buen día Jeferson!
El código de Js me podría funcionar para trabajarlo con VB.Net?
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();
%>
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.
Hola, pero donde es la parte del html que se agregan los botones de export o print que no los veo?
Hola Jepe! Se construyen mediante JavaScript.
Saludos.
Entiendo. Lo que me sucedio es que ya tenia un jquery.js ya cargado y al.poner el otro daba conflicto. Puse a convivir los dos y funciono. Gracias.
???
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.
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.
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
Hola Osvaldo!
Muchas gracias por dejar un comentario.
En la documetanción oficial, creo que combinando estos dos post lo puedes conseguir:
https://datatables.net/examples/api/show_hide.html
https://datatables.net/examples/basic_init/hidden_columns.html
..con uno se inicializan las columnas como visibles o no, con el otro se muestran o esconden con JavaScript. Espero que sirva.
Saludos.
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.
Muchas gracias por el aporte! Saludos Saúl.
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
Hola Francisco!
De nada, creo que con la documentación oficial, esto en concreto te puede servir: https://datatables.net/extensions/buttons/examples/print/select.html
Si no me equivoco creo que hay distintas opciones según el tipo de exportación, con la variable exportOptions.
Gracias por dejar un mensaje.
Saludos.
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?
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.
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.
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.
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.
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.
Hola.
Ojala me puedan ayudar.
El detalle es que al exportar a excel deseo ingresar unas 5 lineas de texto como encabezado muy aparte de los registros de la tabla.
E logrado enviar las 4 lineas aparte del titulo, pero solo se refleja en una sola linea del excel.
Buenas tardes Walter.
Creo que con este código editandolo, se tiene que poder hacer: https://jsfiddle.net/lbriquet/0n9j52jx/
Si no, siempre puedes escribir un botón de crear el Excel totalmente personalizado, aquí hay una de las principales librerías para esto: https://docs.sheetjs.com/
Saludos.