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:
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:
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.
- jQuery: https://jquery.com/
- Bootstrap: https://getbootstrap.com/
- Datatables: https://datatables.net/
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!
Me ayudo mucho, gracias
Bien! Me alegro, gracias por comentarlo.. ?
como hago para agregarle los botones de pdf, excel e impresion? xq cuando quiero agregarlo me desaparece el filtro. gracias
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!
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
Hola Neptalí! Comparto un código fuente completo aquí:
https://jnjsite.com/datatables-con-botones-para-csv-excel-pdf-e-imprimir/
Muchas gracias! Me sirvió
De nada ? Gracias por dejar un comentario!
Excelente he buscado esto por dias y es claro y preciso , muy agradecido por el aporte
De nada, y gracias por dejar un comentario ?
Muchas Gracias, Genio
De nada Rubi!
Gracias por dejar un comentario.
disculpa pero como se le hace para que los datos sean editables y se guarden en una base de datos? gracias.
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.
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
Buenas Rafael!
Eso lo podemos hacer con el parámetro order, en el array de configuración podría quedar algo así. Si por ejemplo la columna activado/desactivado es la 3 y el nombre la 2, quedaría order así:
«order»: [[ 3, «asc» ], [ 2, «asc» ]],
Espero que sirva, de todas formas aquí tienes toda la doc relacionada en el foro oficial de Datatables:
https://datatables.net/forums/discussion/48105/sort-multiple-columns-by-default
Saludos.
Muchas gracias CRACK de CRACKS esto me sirvió mucho y muy buena documentación para poder entender el código
Muchas gracias por dejar un comentario Jonathan!
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,
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.
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
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.
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();
%>
Hola Daniela!
A lo mejor te interesa este otro post relacionado con la descarga de ficheros y el Datatables 😉
https://jnjsite.com/datatables-con-botones-para-csv-excel-pdf-e-imprimir/
Saludos.
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 ???
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.
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.
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.
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
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.
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?
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!
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
Buenos días Jonathan!
De nada, muchas gracias por dejar un comentario, este post es sobre lo que comentas: https://jnjsite.com/datatables-filtrando-entre-rangos-de-fechas-por-columnas/
Espero que sirva de ayuda.
Saludos.
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?
Hola Aila!
Gracias por dejar un comentario! Sí, se puede hacer búsquedas con expresiones regulares, si mal no recuerdo sería .search(‘value1|value2’, true, false)
Aquí está la documentación oficial: https://datatables.net/examples/api/regex.html
Saludos.
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?
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.
Cordial saludo,
Gracias me fue muy util, queria preguntarte hay manera de en la misma tabla, insertar y editar informacion?
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.
A listo voy a mirar, y otra consulta.. hay forma de determinar el ancho de las columnas? o ya toca con css?.
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é.
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.
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.
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
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.
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?
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.
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.
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.
Muchas gracias, me sirve la info por que no solo puedo modificar ese label sino todo lo de la paginacion! saludos
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
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.
Hola, se puede ocultar el boton searh de la parte superior, que solo queden los que estan en cada columna?
Hola Juan, sí que se puede, con el campo «dom», la f de filter corresponde a la caja de búsqueda.
Saludos.
Buenas tardes unas preguntas, en mi datable hago un filtro por un rengo de fechas pero al momento de imprimir solo me imprime los primeros diez y son como resultado como 90 registros que puedo hacer ahi o me falta algo. espero me puedan ayudar gracias de ante mano
Buenas Pedro.
También me ha pasado alguna vez, cuando procesamos en el servidor página a página, entonces sólo tenemos en el frontend la información de una página, con lo que sólo se imprime la primera por esto mismo.
Creo que tendrás que hacer el procesamiento completo en el servidor para enviar a imprimir. Otra opción es ver todos los resultados en el frontend, aumentas el tamaño de página para ver los 90 que indicas, entonces le das a imprimir de nuevo y verás como te los imprime todos. La solución definitiva para todos los casos creo que mejor sería hacer un botón de imprimir custom sin usar Datatables.
Saludos.
buenas tardes
el codigo funciona pero cuando trabajo con base de datos SQL, no filtra los datos.
ayuda por favor
gracias por la respuesta
Buenos días Luis.
Puedes filtrar los datos con Datatables de varias formas usando SQL:
* Filtrando en el servidor con SQL cuando obtienes los datos, antes de enviar el HTML, CSS y JavaScript al navegador.
* Filtrando usando el server-side-processing del Datatables.
Saludos.
Buen dia
cree que pueda dar un ejemplo
se lo agradeceria muucho
Saludos.
Buenas noches Luis.
Sí, hay dos formas:
* La más sencilla es hacer un formulario que contenga la caja de búsqueda. Entonces al envíar el formulario, en el servidor, por ejemplo con PHP, Java, Python.. con el lenguaje que utilices en el servidor, consultas la base de datos usando dicho lenguaje SQL. Y luego devuelves el resultado en HTML, CSS y JavaScript con el Datatables.
* La forma las elaborada es usar el server-side-processing del Datatables, por ejemplo aquí tienes un ejemplo usando Symfony en la parte del backend: https://jnjsite.com/datatables-y-symfony-cargando-tablas-con-cantidades-ingentes-de-datos/ ..en última caja de código usando PHP se consulta a la BD con SQL.
Saludos.
Buenas, Jnj. Muchas gracias por los post y por las respuestas a los comentarios. En la busqueda que se hace en cada campo, ¿como se puede invertir la logica, es decir, que muestre los registros que no contienen la cadena? Lo he intentado de varias maneras, pero no consigo nada
Buenos días Ángel.
Se debería de poder hacer usando una expresión regular en la búsqueda por columna:
.search( this.value )
En vez de this.value, poniendo que no contenga this.value y el parametro de regex=true.
Saludos.