Usá DataTables te dijeron.
«Es el mejor plugin que vas a encontrar para mostrar datos en forma resumida»
«Es súper fácil de usar»
Si… claro.
Armar la tabla no es muy complicado, es cierto, pero cuando le empezabas a encontrar el gustito… las cosas se complicaron.
¿Y ahora?
¿¿Qué pasa que no se cargan los datos??
Estarás pensando «¿Por qué no me quedé con las viejas tablas HTML que andaban sin problemas?»
Pero en el fondo sabés por qué.
Querés un sitio moderno.
Querés que los visitantes tengan una buena experiencia.
Querés que el cliente te vuelva a contratar y le cuente a sus amigos.
Así que más vale hacer un esfuercito más.
Lo primero que hay que tener claro es que no se puede resolver un problema sin primero diagnosticarlo.
Es por eso que en este artículo voy a hablar sobre los problemas más frecuentes que te podés encontrar al usar DataTables.
Aclaración: Aquí hablaré exclusivamente de problemas que impiden que el DataTable funcione. Si tenés un problema de performance mirá esto.
Andá, buscate un café, yo te espero.
¿Listo?
Bien, arranquemos.
Partes que hacen al DataTable
El DataTable se compone de tres elementos:
- HTML
- JavaScript
- PHP
El HTML del DataTable
La primera pregunta que cabe es ¿El HTML está correctamente escrito?
Doy por descontado que los tags <table> y </table> están en su lugar.
Luego, ¿está puesto el <thead>? ¿Y el </thead>?
Ok, y dentro del <thead>, ¿hay algún <tr>? y dentro del <tr>, ¿hay elementos <th>?
En resumen, ¿tu table se ve parecido a este?
<table id="theTable" class="display" style="width: 100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
</table>
¿Notaste que no hay <tbody>?
No, no es un error.
El <tbody> lo va a armar el JavaScript, ya vamos a llegar.
El JavaScript del DataTable
El segundo componente es el código JavaScript que le dará vida al DataTable.
Lo principal (Donde yo mismo siempre me equivoco):
¿Está puesta la referencia a jQuery?
Es decir, ¿hay en tu código algo como <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
¿Por qué se necesita esto? Porque jQuery es una dependencia de DataTables (Recordá que DataTables es simplemente un plugin de jQuery).
A renglón seguido viene: ¿Está puesta la referencia al script de DataTables?
O, en criollo, ¿hay en tu código algo como <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
¿Sí? ¡Perfecto!
Entonces, lo que queda es saber si la configuración del DataTable es correcta.
En principio lo único imprescindible en ese escenario es la llamada Ajax, algo como:
<script type="application/javascript">
$(document).ready( function () {
$('#theTable').DataTable({
ajax: '/get_data.php',
});
} );
</script>
¿Qué puede andar mal aquí? Bueno… aparte de errores de sintaxis que siempre puede haber, el id de la tabla podría no coincidir en la función y en el HTML.
En este caso theTable está definido en la llamada a la función $ (En $('#theTable')) y en la definición de la tabla (<table id="theTable"...>
Otro tema conflictivo puede ser la URL a la que debe realizarse la llamada Ajax.
Si todo esto está bien podrías sospechar de que la llamada Ajax no se está comportando como es debido (Tal vez no está mandando todos los parámetros o encabezados que espera tu PHP).
Es un caso bastante extremo y, honestamente, no creo que se te presente pero… si desconfiás te recomiendo recurrir a la consola del desarrollador de tu navegador (En la pestaña Network):
Si todo esto está ok sólo queda un sospechoso posible…
El PHP del DataTable
Y al fin llegamos a la parte más jugosa del artículo 🙂
Aquí realmente no hay muchas reglas que seguir ya que todo depende de cómo obtengas la información que buscas mostrar en tu DataTable.
Lo que sí es importante es que tengas en cuenta qué es lo que tu FrontEnd espera recibir y cómo espera recibirlo.
Así que vamos a las preguntas:
¿Estás retornando json?
Si tienes dudas puedes hacer un request directamente a la URL a donde apunta tu Ajax.
En mi caso sería http://localhost:8000/get_data.php y la respuesta que obtendré será:
{
"data": [
[
"1",
"Chair",
"20.0"
],
[
"2",
"Shoe",
"1.0"
],
[
"3",
"Candle",
"0.75"
]
]
}
La forma más fácil de generar algo como esto es guardar los datos en un arreglo y luego usar la función json_encode.
Si estás recibiendo una página en blanco o algún error, probablemente te convenga debuggear tu php antes de continuar.
Claro que esto es sólo el primer paso.
Luego debes verificar que ese json tenga la estructura correcta.
¿Tiene una propiedad llamada data?
Y dentro de dicha propiedad, ¿está el arreglo de registros que buscas mostrar?
Si todavía tienes problemas, otras dos preguntas que pueden orientarte:
- ¿La cantidad de datos que contienen los registros coincide con las columnas definidas en el HTML?
- ¿El orden de los elementos dentro del arreglo coincide con el de las columnas definidas en el HTML?
Recapitulando
DataTables es ciertamente un aliado poderoso, pero también es un cúmulo de partes móviles que deben estar coordinadas cual reloj suizo para que todo salga bien.
Guárdate este artículo en tus favoritos para tenerlo siempre a mano si te vuelves a encontrar desorientado sobre cómo solucionar tus problemas con un DataTable.
Simplemente recorre la lista de preguntas y rápidamente tendrás la clave que te ayudará a seguir adelante.
muchas gracias por el dato, solamente tengo una duda. Tengo un filtro que al cambiarlo.. no se como aplicar ese nuevo filtro y recargar la tabla.
vi que si uso DataTable().ajax.reload si se recarga pero no se como pasarle el parametro del nuevo valor del filtro a aplicar.
Saludos y feliz año 2023
Hola Gilberto:
Necesitas agregar los datos que usarás para filtrar al campo
dataque se enviará vía Ajax. Del lado de php los tomas vía$_POST, con esto puedes filtrar la consulta y emitir los resultados que necesitas.Luego, lo que debes hacer es generar algún tipo de trigger para que se vuelva a ejecutar la llamada Ajax. Lo más conveniente es utilizar el método
draw()del DataTable, por ejemplo, al modificar el contenido de alguno de los campos de filtro, o bien con un botón de aplicar el filtro.Saludos,
Hola Mauro tengo un problema a ver si les paso, tengo un sistema funcionando bien en local todas las tablas andan bien. Me tope con subir una tabla me muestra todo bien pero no la página Ivón y el filtrado. Me doy cuenta que se bloquea el código y lo me carga el pie de página donde están los JS y datatable. Pero en local funciona bien. Ya no se que hacer para verificar cual es el error. No sale ningún error solo pude ver que no me carga el pie de página entiendo que por eso todo queda sin terminar
Hola Sebastián:
Lo primero que habría que determinar es si se trata de un problema a nivel de front-end o de back-end.
Si tenés habilitados los logs del servidor podrías encontrar información ahí que te de alguna pista.
Otra cosa que valdría la pena probar es ver qué aparece en la consola del navegador, a ver si hay algún problema de JS o, incluso, ver la parte de «Red» de la consola esa, a ver si el servidor está respondiendo correctamente.
Saludos,
Gracias!! Eres la guía que necesitaba y no encontraba en ningún lugar de internet jeje.. Haz más contenido así..
Gracias!!
todo bien, llena correctamente mi tabla sin problema. pero cuando mi query no tiene datos para mostrar en la tabla me envía error. solo funciona bien cuando mi query tiene datos para mostrar.
Hola Jesús. ¿Podrías dar algún detalle del tipo de error que estás recibiendo? ¿Es un error de JavaScript, de php, de http o de qué tipo se trata? Sin ver un mensaje de error es difícil guiarte.
Saludos
hola amigo tengo problemas al momento de hacer una busqueda filtrada , en este caso quiero buscar un id de 6 digitos y n me filtra en cambio con 5 digitos si me funciona. has escuchado de esto? gracias
Hola:
Personalmente no lo he escuchado. Me imagino que el problema puede deberse al tipo de datos del ID. Verifica si no hay un limitante por ahí.
Saludos,
Hola que tal!, yo tengo un datatable que podria decir funciona bien, solo tiene un pequeño detalle, en una de las columnas contiene botones los cuales al estar esa columna que lo contiene visible realiza su trabajo, pero cuando se hace pequeña la tabla esa columna pasa a ser un hidden column dentro de un desplegable de la primer columna, y el botn deja de funcionar, que creees que pueda ser?
Hola, pero si agrego datos con comillas o paréntesis, ¿hay alguna forma de que data tables permita leer esos caracteres especiales y no genere error?
Gracias por la información, tengo conocimientos básicos en programación, por lo cual tengo problemas a la hora de entender ciertas cosas, actualmente quiero mostrar una data desde la BD, puedo notar que el id de tabla es String, y tiene un formato 002-002, no se si esto hace que muestre un error DataTables warning: table id=TblProducto – Invalid JSON response.
Hola:
Es un poco difícil decirlo sin más información me temo. En principio te diría que revises cuál es la respuesta JSON a la que el error hace referencia. Es posible que se esté colando algún error de php que hace que la respuesta no sea JSON válido.
Saludos,
Tengo un datatable el cual tiene muchos campos (todos necesarios para completar información). Lo que quiero es que al cargar la vista normal quiero que algunos campos que no son necesarios observar siempre estén ocultos, y que solo se muestren cuando yo quiera (esta parte ya está hecha: mostrar y ocultar de forma dinámica).
Aquí están mi tabla y el botón para ocultar y mostrar columnas. Resumidos son 18 campos reales y totales; solo quiero mostrar 12 al abrir la app y el resto que se muestren cuando las seleccione con mi botón de ocultar y mostrar.
Ocultar/Mostrar Columnas
Articulo
Código
Descripción
Precio
Disp
<a role="item" href="#"
<table id="exampleVen" class="display dt-responsive tablaProductos" style="width:100%;margin-top:1em"><thead>
<th></th>
<th>Articulo</th>
<th>Código</th>
<th>Descrip</th>
<th>Precio</th>
<th style="color:red">Disp</th>
<th></th>
</thead>
</table>
Esta es mi función para ocultar y mostrar columnas a voluntad:
$(document).ready(function() {var table = $('#exampleVen').DataTable( {
"scrollY": "200px",
"paging": false
} );
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// Obtener datos de columna
var column = table.column( $(this).attr('data-column') );
// Alternar la visibilidad
column.visible( ! column.visible() );
} );
} );
Hola Guillermo:
¿Qué dificultad estás encontrando?
tengo un datatable, que no muestra todos los datos. Si lo coloco de uno si los muestra, pero si los junto no. PHP me devuelve el objeto json correctamente. Tengo otras datatables que si funcionan. No entiendo por que este caso no. Desde ya muchas gracias por tu guia.
Hola María!
¿Ves algún error en la consola de Js?
Hola Mchojrin, yo tengo los datos que me muestra una datatable con su correspondiente boton «Editar» y lo que quiero es que cuando presiono el boton «Editar» me abra otra datatable y me muestre los datos de ese registro elegido, desde ya muchas gracias por la atencion.-
Hola Carlos!
Puedes hacerlo de varias formas: puede ser un popup por ejemplo o un nuevo div dentro de la página.
¿Qué haz intentado ya?
lo que pasa es que por cada persona que edito me devuelve varios registros y el popup no me sirve y lo que quiero es mostrar en una nueva pagina un datatables !!, gracias .
Ok, supongo que podrías abrir una nueva página a la que le pases vía la URL el id de la persona y que arme una DataTable sólo con la info de dicha persona.