Optimizando DataTables: Carga Rápida y Eficiente

21/03/2022

★★★★★Valoración: 4.4 (6537 votos)

Hoy en día, la paciencia del usuario es un bien escaso. Si tu sitio web tarda más de unos pocos segundos en cargar, estás perdiendo visitantes y, con ellos, valiosas oportunidades. Esta premisa se vuelve aún más crítica cuando hablamos de aplicaciones que manejan grandes volúmenes de datos, como aquellas que utilizan la popular y robusta biblioteca jQuery DataTables. Aunque visualmente atractivas y altamente funcionales, las tablas que tardan una eternidad en desplegarse son un claro indicio de un problema subyacente que debe ser abordado con urgencia. Más de la mitad de los usuarios abandonarán tu página si no encuentran lo que buscan rápidamente, y aquellos que se quedan, inevitablemente, comenzarán a dudar de la profesionalidad y la calidad de tu trabajo. Afortunadamente, existe una solución elegante para este desafío.

¿Cómo Iniciar un DataTable? — De otra forma deberás iniciar la table despues, de cargar los datos de la forma en la que lo haces ahora asi : $('#sampleTable').DataTable();. La function DataTable() permite "iniciar" un datatable. Después de hacer esto entonces efectivamente deberías tener un datatable creado a partir del table ("#sampleTable") en tu pagina.

Antes de sumergirnos en la solución, es fundamental comprender cómo se carga un DataTable en sus formas más básicas y por qué estas se vuelven problemáticas con el tiempo.

Índice de Contenido

Entendiendo la Carga Inicial de DataTables: El Enfoque Cliente-Servidor Simplificado
El Cuello de Botella: ¿Por Qué tu DataTable Tarda Tanto?
- Factores que Afectan el Tiempo de Carga:
La Solución Definitiva: Procesamiento del Lado del Servidor (Server-Side Processing)
Comunicación FrontEnd-BackEnd en Server-Side Processing
La Respuesta del BackEnd: El Formato JSON Esperado por DataTables
Server-Side Processing: ¡La Clave para la Velocidad!
Preguntas Frecuentes sobre DataTables y su Carga

Entendiendo la Carga Inicial de DataTables: El Enfoque Cliente-Servidor Simplificado

Para comprender cómo optimizar DataTables, primero es esencial entender cómo funciona su carga más básica. En su configuración más simple, DataTables puede ser inicializado directamente con datos predefinidos en un arreglo JavaScript. Esto es útil para pequeñas demostraciones o tablas con información estática, donde el volumen de datos es mínimo y no requiere una interacción compleja con una base de datos.

El siguiente ejemplo ilustra esta aproximación:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"> <title>DataTables example</title> </head> <body> <h2>Tabla de Productos Básica</h2> <table id="theTable" class="display" style="width: 100%"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Price</th> </tr> </thead> <tfoot> <tr> <th>Id</th> <th>Name</th> <th>Price</th> </tr> </tfoot> </table> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script> <script type="application/javascript"> $(document).ready( function () { $('#theTable').DataTable({ 'data': [ [1, 'Caja', 10.0], [2, 'Silla', 20.2] ], }); } ); </script> </body> </html>

Sin embargo, la utilidad de una aplicación real reside en su capacidad para interactuar con fuentes de datos dinámicas. Una práctica común es combinar el código JavaScript con un lenguaje de servidor, como PHP, para extraer información de una base de datos e incrustarla directamente en la página HTML antes de que se envíe al cliente. Este enfoque permite que la tabla se inicialice con datos reales, haciendo la aplicación más funcional.

¿Qué quiere decir que el.js del DataTable no se está cargando? — si marca ese problema en javascript quiere decir que el .js del DataTable no se esta cargando. O quizas el codigo donde asignas el $ ('#grid').DataTable (); se ejecuta antes de la linea donde defines el .js de las librerias De acuerdo al ejemplo de Leandro y al codigo que muestras las referencias tanto a css como js no son las mismas.

<?php try { $conn = new PDO('sqlite:dt.sq3'); } catch (PDOException $exception) { die($exception->getMessage()); } $sql = "SELECT * FROM products"; $st = $conn ->query($sql); if ($st) { $rs = $st->fetchAll(PDO::FETCH_ASSOC ); ?> <script type="application/javascript"> $(document).ready( function () { $('#theTable').DataTable({ 'data': [ <?php foreach ($rs as $row) { ?> [ '<?php echo $row['id'];?>', '<?php echo $row['name'];?>', '<?php echo $row['price'];?>' ], <?php } ?> ], }); } ); </script> <?php } else { var_dump($conn->errorInfo()); die; } ?>

El Cuello de Botella: ¿Por Qué tu DataTable Tarda Tanto?

Ambos métodos funcionan perfectamente bien... hasta que la cantidad de registros se vuelve grande. La definición de "grande" puede variar, pero podrías empezar a notar problemas de rendimiento con tan solo 500 registros. Sin embargo, si estás manejando 150,000 o más, tus páginas definitivamente tardarán una eternidad en cargarse. La razón es simple: en estos escenarios, todo el conjunto de datos, sin importar cuán extenso sea, se carga completamente en la memoria del navegador del cliente.

Aunque DataTables te permite mostrar la información paginada (por ejemplo, 10 registros por página), el problema persiste porque el tiempo total de carga no se modifica. El navegador aún tiene que descargar, interpretar y procesar la totalidad de los datos antes de que pueda mostrar la primera página. Toda esa información que no se utilizará de inmediato no hace más que sobrecargar tanto al servidor (especialmente al de bases de datos) como al cliente.

Factores que Afectan el Tiempo de Carga:

El flujo general de procesamiento en estos casos, que contribuye a la lentitud, es el siguiente:

El servidor recibe la petición.
Se ejecuta el script del lado del servidor (ej. PHP).
Se realiza la consulta completa a la base de datos.
El servidor recibe todos los registros de la tabla.
Se genera el HTML y el JavaScript (con todos los datos incrustados).
Se envía todo el paquete al cliente.
El cliente interpreta el HTML y el JavaScript.
Se ejecuta el JavaScript y se dibuja la tabla, con todos los datos cargados en la memoria del navegador.

Como puedes imaginar, para mostrar los primeros 10 registros, no es realmente necesario tener en memoria los otros 149,990. Toda esa información que no se utilizará de inmediato no hace más que sobrecargar tanto al servidor (especialmente al de bases de datos) como al cliente. Si múltiples usuarios acceden simultáneamente, el problema se magnifica, llevando a una experiencia de usuario deficiente para todos. Podrías intentar mejorar los recursos de hardware o implementar algún tipo de caché, y si bien estas soluciones pueden ayudar, existe una aproximación mucho más directa y al alcance de tu mano para DataTables.

¿Qué información proporciona el objeto DataTable? — Proporciona información de referencia sobre el objeto DataTable . Proporciona información general sobre la biblioteca de clases de .NET Framework, incluido el espacio de nombres System , así como su espacio de nombres de segundo nivel, System.Data.

La Solución Definitiva: Procesamiento del Lado del Servidor (Server-Side Processing)

Aquí es donde reside la verdadera genialidad de DataTables: su soporte para el procesamiento del lado del servidor. Este plugin admite dos modos principales:

Client-Side (Lado del Cliente): Donde todo el procesamiento (paginación, ordenamiento, búsqueda) se realiza en el navegador del usuario, una vez que todos los datos han sido cargados. Este es el modo por defecto.
Server-Side (Lado del Servidor): Donde el procesamiento se realiza en el servidor, y solo se envía al cliente la porción de datos necesaria para la visualización actual. El cliente se encarga únicamente del renderizado.

La clave para resolver los problemas de rendimiento con grandes volúmenes de datos es cambiar al modo Server-Side. Si bien es un poco más complejo de implementar inicialmente, los beneficios en términos de velocidad y escalabilidad son inmensos.

En este modo, DataTables realizará una llamada AJAX a tu servidor cada vez que necesite redibujar la información de la tabla. Esto sucede al paginar, ordenar, buscar, etc. En lugar de cargar todos los datos de una vez, el navegador solo pide la información que necesita en ese momento, reduciendo drásticamente el volumen de datos transferidos y el procesamiento en el cliente.

Para comenzar a usar este modo, necesitas modificar la configuración de tu DataTable de la siguiente manera:

$('#theTable').DataTable( { serverSide: true, ajax: '/get_data.php' } );

A diferencia del ejemplo anterior donde la tabla se cargaba con todos los datos al inicio, el script get_data.php (o el nombre que le des a tu endpoint) deberá ser mucho más "inteligente". No solo tendrá que devolver los datos, sino también entender y responder a las peticiones específicas que el FrontEnd le enviará.

¿Cómo agregar datos a una tabla en C#? — Ahora podemos agregar datos a nuestra tabla en forma de filas. Para agregar una fila a nuestra tabla, tenemos que crear un objeto de la clase DataRow. La clase DataRow define una nueva fila para agregar datos a nuestra tabla en C#.

Comunicación FrontEnd-BackEnd en Server-Side Processing

La comunicación entre el FrontEnd (DataTables en el navegador) y el BackEnd (tu script PHP, por ejemplo) se realiza a través del envío de parámetros en la URL de la llamada AJAX (a menos que lo configures explícitamente para usar POST). Esto significa que tu script PHP deberá recogerlos de la superglobal $_GET.

Comprender estos parámetros es crucial para construir una consulta SQL eficiente y precisa. A continuación, te detallamos los más importantes:

Parámetro	Descripción
`start`	Número de registro por el que debe comenzar la paginación. Es el desplazamiento (offset) en la consulta SQL.
`length`	Cantidad de registros que se espera que el servidor devuelva. Es el límite (limit) en la consulta SQL. En esencia, a partir del registro `start`, retorna `length` registros.
`search`	Un arreglo que contiene los parámetros de la búsqueda global realizada por el usuario en el cuadro de búsqueda principal de DataTables. `value`: El texto ingresado por el usuario. `regex`: Booleano que indica si `value` debe ser interpretado como una expresión regular.
`columns`	Un arreglo con una entrada por cada columna de la tabla. Cada entrada es, a su vez, un arreglo con claves importantes: `data`: Información de mapeo entre el arreglo de datos y la tabla HTML (ej., `id => 0`, `name => 1`, `price => 2`). `name`: Nombre de la columna como está definido en la propiedad `columns.name` (si se usa). `searchable`: Booleano que indica si es posible realizar búsquedas sobre esta columna individualmente. `orderable`: Booleano que indica si es posible realizar ordenamientos basados en esta columna. `search`: Un arreglo similar a la búsqueda global, pero aplicado a esta columna en particular (búsqueda por columna).
`order`	Un arreglo que especifica el criterio de ordenamiento que debe aplicarse. Contiene una entrada por cada criterio a utilizar (para combinar varios). Cada entrada es un arreglo con dos claves: `column`: Número de la columna por la que se quiere ordenar. `dir`: String con la dirección del ordenamiento (`asc` para ascendente, `desc` para descendente).

La URL generada por DataTables con todos estos parámetros puede ser sorprendentemente extensa. Por ejemplo, una solicitud típica podría verse así (decodificada para mayor legibilidad):

http://localhost:8000/get_data.php?draw=1&columns[0][data]=0&columns[0][name]=&columns[0][searchable]=true&columns[0][orderable]=true&columns[0][search][value]=&columns[0][search][regex]=false&columns[1][data]=1&columns[1][name]=&columns[1][searchable]=true&columns[1][orderable]=true&columns[1][search][value]=&columns[1][search][regex]=false&columns[2][data]=2&columns[2][name]=&columns[2][searchable]=true&columns[2][orderable]=true&columns[2][search][value]=&columns[2][search][regex]=false&order[0][column]=0&order[0][dir]=asc&start=0&length=10&search[value]=&search[regex]=false&_=1619613946473

Al realizar un var_dump($_GET) en tu script PHP, verás una estructura de datos anidada que refleja perfectamente estos parámetros, permitiéndote construir dinámicamente tu consulta SQL. Aquí un ejemplo de cómo se vería la salida:

array (size=7) 'draw' => string '1' (length=1) 'columns' => array (size=3) 0 => array (size=5) 'data' => string '0' (length=1) 'name' => string '' (length=0) 'searchable' => string 'true' (length=4) 'orderable' => string 'true' (length=4) 'search' => array (size=2) ... 1 => array (size=5) 'data' => string '1' (length=1) 'name' => string '' (length=0) 'searchable' => string 'true' (length=4) 'orderable' => string 'true' (length=4) 'search' => array (size=2) ... 2 => array (size=5) 'data' => string '2' (length=1) 'name' => string '' (length=0) 'searchable' => string 'true' (length=4) 'orderable' => string 'true' (length=4) 'search' => array (size=2) ... 'order' => array (size=1) 0 => array (size=2) 'column' => string '0' (length=1) 'dir' => string 'asc' (length=3) 'start' => string '0' (length=1) 'length' => string '10' (length=2) 'search' => array (size=2) 'value' => string '' (length=0) 'regex' => string 'false' (length=5) '_' => string '1619615674442' (length=13)

Con esta información, puedes construir una consulta SQL que solo traiga los datos necesarios. Por ejemplo, para aplicar el ordenamiento, paginación y una búsqueda básica, tu script PHP podría incluir lógica similar a la siguiente:

<?php try { $conn = new PDO('sqlite:dt.sq3'); } catch (PDOException $exception) { die($exception->getMessage()); } // Construir la cláusula ORDER BY $orderBy = " ORDER BY "; foreach ($_GET['order'] as $order) { // Se asume que las columnas en la DB corresponden al índice + 1 o se mapean // $_GET['columns'][$order['column']]['data'] recupera el índice de la columna // y se usa para mapear al nombre del campo de la base de datos si es necesario. // Para este ejemplo, asumimos que los índices de columna se corresponden con el orden de los campos 'id', 'name', 'price'. $fields = ['id', 'name', 'price']; // Mapeo de índices de columna a nombres de campos DB $orderBy .= $fields[$order['column']] . " {$order['dir']}, "; } $orderBy = substr($orderBy, 0, -2); // Eliminar la última coma y espacio $where = ''; // Procesar búsqueda global if (!empty($_GET['search']['value'])) { $searchValue = $_GET['search']['value']; $globalSearchParts = []; foreach ($fields as $field) { // Escapar el valor para evitar inyección SQL y usar LIKE para búsqueda flexible // Considerar el uso de sentencias preparadas para mayor seguridad $globalSearchParts[] = "$field LIKE '%" . str_replace("'", "''", $searchValue) . "%'"; } $where .= '(' . implode(' OR ', $globalSearchParts) . ')'; } // Procesar búsqueda por columna (más avanzado, se puede extender) $columnSearchParts = []; foreach ($_GET['columns'] as $k => $column) { if (!empty($column['search']['value']) && $column['searchable'] == 'true') { $searchColValue = $column['search']['value']; // Escapar el valor para evitar inyección SQL $columnSearchParts[] = "{$fields[$k]} LIKE '%" . str_replace("'", "''", $searchColValue) . "%'"; } } if (!empty($columnSearchParts)) { if (!empty($where)) { $where .= " AND "; } $where .= '(' . implode(' AND ', $columnSearchParts) . ')'; } $length = (int)$_GET['length']; $start = (int)$_GET['start']; // Consulta para los datos paginados y filtrados $sql = "SELECT * FROM products " . ($where ? "WHERE $where ": '') . "$orderBy LIMIT $length OFFSET $start"; // Nota: Se asume que el 'search' no es una expresión regular para simplificar el ejemplo. // La implementación completa debería manejar esto y considerar sentencias preparadas para todas las consultas. ?>

La Respuesta del BackEnd: El Formato JSON Esperado por DataTables

Tan importante como entender lo que DataTables envía, es saber lo que espera recibir. Para que la comunicación sea exitosa y el DataTable pueda renderizar correctamente la información, tu script PHP debe devolver una respuesta en formato JSON con una estructura específica. Los elementos clave que DataTables espera son:

Campo JSON	Descripción
`data`	El arreglo de los registros que se levantaron de la base de datos para la página actual. Este debe ser un arreglo de arreglos (o un arreglo de objetos, dependiendo de cómo configures DataTables).
`recordsTotal`	El número total de registros que existen en la base de datos sin aplicar ningún filtro. DataTables usa esto para calcular el número total de páginas.
`recordsFiltered`	El número de registros que devuelve la consulta después de aplicar los filtros (búsquedas globales o por columna). Este valor es usado para indicar cuántos registros coinciden con la búsqueda actual.
`draw`	El valor del parámetro `draw` que DataTables envió en la solicitud original. Simplemente debes devolverlo tal cual. Esto ayuda a DataTables a manejar múltiples solicitudes AJAX y asegurarse de que la respuesta correcta se empareja con la solicitud correcta.

Finalmente, tu código PHP se completaría con la ejecución de la consulta y la construcción de la respuesta JSON:

<?php // ... (código anterior para conexión y construcción de $sql, $where, $orderBy, $length, $start) ... // Consulta para obtener el total de registros sin filtrar $countSql = "SELECT count(id) as Total FROM products"; $countSt = $conn ->query($countSql); $total = $countSt->fetch()['Total']; // Consulta para obtener el total de registros filtrados (si hay filtro, sino es igual a $total) $countFilteredSql = "SELECT count(id) as TotalFiltered FROM products " . ($where ? "WHERE $where ": ''); $countFilteredSt = $conn ->query($countFilteredSql); $totalFiltered = $countFilteredSt->fetch()['TotalFiltered']; // Ejecutar la consulta principal para los datos de la página actual $st = $conn ->query($sql); // $sql ya fue construida en el ejemplo anterior if ($st) { $rs = $st->fetchAll(PDO::FETCH_FUNC, fn($id, $name, $price) => [$id, $name, $price] ); // Devolver la respuesta JSON echo json_encode([ 'draw' => (int)$_GET['draw'], // Es crucial devolver el 'draw' recibido 'data' => $rs, 'recordsTotal' => $total, 'recordsFiltered' => $totalFiltered, ]); } else { var_dump($conn->errorInfo()); die; } ?>

Server-Side Processing: ¡La Clave para la Velocidad!

La implementación del procesamiento del lado del servidor en DataTables es una técnica poderosa que transforma radicalmente el rendimiento de tus tablas de datos, especialmente cuando se enfrentan a grandes volúmenes de información. Al delegar la paginación, el ordenamiento y la búsqueda al servidor, reduces drásticamente la carga sobre el navegador del cliente y la cantidad de datos transmitidos por la red. Esto se traduce en una experiencia de usuario mucho más fluida y una mayor escalabilidad para tu aplicación.

¿Siempre te conviene usar Server-Side? No necesariamente. Si la cantidad de registros es pequeña (por ejemplo, menos de unos pocos cientos) y no hay retrasos visibles en la carga o interacción, la complejidad adicional de implementar Server-Side podría no justificarse. En esos casos, el modo Client-Side es perfectamente adecuado y más sencillo de configurar. Sin embargo, si tus DataTables se están convirtiendo en un cuello de botella, si tus usuarios se quejan de lentitud, o si anticipas un crecimiento significativo en la cantidad de datos, Server-Side es, sin duda, la solución más robusta y escalable. Es una inversión de tiempo que se paga con creces en rendimiento y satisfacción del usuario.

Preguntas Frecuentes sobre DataTables y su Carga

Para complementar la comprensión de DataTables y su optimización, abordemos algunas preguntas comunes que suelen surgir al trabajar con esta herramienta:

¿Cómo sé si mi DataTable está usando Server-Side o Client-Side?

Puedes inspeccionar las solicitudes de red en las herramientas de desarrollador de tu navegador (generalmente accesibles con F12, en la pestaña "Network" o "Red"). Si DataTables está haciendo llamadas AJAX a tu servidor cada vez que cambias de página, ordenas o buscas, está en modo Server-Side. Si solo hace una llamada inicial grande que descarga todos los datos y luego todo el procesamiento (paginación, ordenamiento, filtrado) se hace localmente sin más llamadas al servidor, está en modo Client-Side.

¿Puedo combinar Server-Side y Client-Side?

DataTables está diseñado para operar en uno de los dos modos para el procesamiento principal de datos (paginación, ordenamiento, filtrado global). No puedes tener la paginación Server-Side y el ordenamiento Client-Side para la misma tabla. Sin embargo, puedes tener diferentes DataTables en la misma página, algunos en modo Client-Side y otros en modo Server-Side, según sus necesidades específicas de rendimiento y volumen de datos.

¿Qué significa si el archivo .js de DataTables no se está cargando?

Esto es un problema fundamental. Si el archivo JavaScript principal de DataTables (jquery.dataTables.min.js) o sus extensiones no se cargan correctamente, la biblioteca simplemente no funcionará, y tu tabla HTML se mostrará como una tabla HTML normal sin ninguna de las funcionalidades de DataTables. Las razones comunes incluyen:

Rutas incorrectas: Verifica que las rutas en tus etiquetas <script src="..."> sean correctas y apunten a la ubicación real de los archivos en tu servidor.
Orden de carga: jQuery debe cargarse antes que DataTables, ya que DataTables es un plugin de jQuery. Asegúrate de que el script de jQuery esté antes que el script de DataTables en tu HTML.
Errores de consola: Revisa la consola de desarrollador del navegador (F12, pestaña "Console" o "Consola") en busca de errores HTTP 404 (archivo no encontrado) o errores de JavaScript que indiquen problemas de sintaxis o ejecución.
Conflictos de versiones: Asegúrate de que las versiones de jQuery y DataTables sean compatibles entre sí.

¿Cómo se inicia un DataTable?

Para "iniciar" un DataTable, utilizas la función .DataTable() de jQuery sobre el selector de tu tabla HTML. Por ejemplo: $('#sampleTable').DataTable();. Esta función transforma tu tabla HTML básica en una instancia de DataTable con todas sus funcionalidades. Si los datos van a ser cargados vía AJAX, la inicialización puede incluir la configuración ajax, como se mostró en el ejemplo de Server-Side: $('#sampleTable').DataTable({ "ajax": 'url/a/tu/api.php' });. Es crucial que esta inicialización se realice dentro de $(document).ready(function() { ... }); para asegurar que el DOM esté completamente cargado.

¿Qué información proporciona el objeto DataTable en el contexto de .NET?

Es importante aclarar que el "objeto DataTable" en el contexto de .NET Framework (System.Data.DataTable) es conceptualmente diferente de la librería jQuery DataTables que hemos estado discutiendo. En .NET, un DataTable representa una tabla de datos relacionales en memoria, local a una aplicación. Se compone de colecciones de DataColumn (que definen el esquema de la tabla) y DataRow (que contienen los datos reales). Este objeto es parte fundamental de ADO.NET y se utiliza para manejar datos desconectados o para ser rellenados desde una base de datos mediante un DataAdapter. Aunque ambos términos comparten la palabra "DataTable", uno se refiere a una librería JavaScript para la interfaz de usuario en el navegador, y el otro a una clase fundamental en el manejo de datos en el ecosistema de desarrollo de software de Microsoft .NET.

¿Cómo se elimina una fila de un DataTable (Client-Side)?

Para eliminar una fila de un DataTable que ya ha sido inicializado (operando en modo Client-Side), primero necesitas obtener una instancia del objeto DataTable. Puedes verificar si ya es una instancia de DataTable con $.fn.dataTable.isDataTable('#sampleTable'). Una vez que tienes la instancia (por ejemplo, en la variable table), puedes usar el método row().remove().draw(false);. Por ejemplo, si tienes una referencia a la fila (un elemento <tr>), o puedes buscarla por un ID asignado a la fila HTML:


if ($.fn.dataTable.isDataTable('#sampleTable')) { var table = $('#sampleTable').DataTable(); // Obtener la instancia del DataTable // Ejemplo: Asumiendo que 'idRow' es el ID único de la fila que quieres eliminar var rowReference = $("tr[id='" + idRow + "']"); // Buscar la fila por su ID HTML table.row(rowReference).remove().draw(false); // Eliminar la fila y redibujar la tabla // El 'false' en draw(false) evita que la tabla se reordene o repagine, manteniendo la posición actual. }

Ahora que conoces las ventajas del procesamiento del lado del servidor, tienes una herramienta poderosa para acelerar tus aplicaciones y ofrecer una experiencia de usuario fluida, incluso con bases de datos masivas. ¡Es hora de ponerlo en práctica y ver la diferencia en la satisfacción de tus usuarios!

Si quieres conocer otros artículos parecidos a Optimizando DataTables: Carga Rápida y Eficiente puedes visitar la categoría Librerías.