Guía para solucionar problemas de DataTables con Ajax y PHP

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):

Consola del desarrollador del navegador

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:

  1. ¿La cantidad de datos que contienen los registros coincide con las columnas definidas en el HTML?
  2. ¿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.

mchojrin

¿Te quedó alguna duda? Publica aca tu pregunta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: