El plugin DataTables (I). Qué es y cómo obtenerlo

A menudo nos encontramos conque tenemos un dataset, obtenido, por ejemplo, de una base de datos o cualquier otro proceso, con datos comerciales de un cliente, o facturas emitidas, o pedidos pendientes, etc. y tenemos que mostrarlo en la página que vamos a renderizar. El resultado debe ser una tabla con todos los datos, organizados en filas y columnas. Además, deben ser ordenables por las columnas que decidamos, deben admitir búsquedas de datos en tiempo real y, si hay demasiados resultados, deberían aparecer paginados. Todo esto y mucho más podemos hacerlo por programación, escribiendo nuestro propio código que realice cada una de las funciones necesarias. Sin embargo, es mucho más sencillo cuando existe ya un plugin, probado, que funciona bien, rápido y eficiente, y podemos configurarlo en cada caso según necesitemos. Este es DataTables.

El plugin DataTables (II). Uso básico.

En el artículo anterior introdujimos el plugin DataTables, apuntando brevemente cual es su utilidad. Se trata de un mecanismo, basado en jQuery, para renderizar vistas en forma de tablas, a partir de un dataset, de forma que implementen ciertas funcionalidades que resultan prácticas para el usario, haciendo nuestra web más usable y amigable. En concreto nos permite ordenar los datos usando distintas columnas cómo criterio, realizar búsquedas en tiempo real, crear paginaciones cuando hay muchos datos (nosotros, o el usuario, según el caso, decidimos, dinámicamente, cuantos resultados se muestran por página), etc. En el artículo anterior vimos los prerrequisitos necesarios, y lo que necesitamos para usar el plugin. En este artículo vamos a empezar a mostrar su potencia.

El plugin DataTables (III). Configuración por programación.

En el artículo anterior vimos un ejemplo de uso de DataTables. Es tosco, rudimentario y muy limitado, pero nos aporta una primera visión de “por dónde van los tiros”. En este artículo vamos a sacarle mucho más partido al plugin, configurándolo según nuestro diseño, y viendo cómo obtener unos resultados más flexibles. Aprenderemos algunas de las muchas opciones de configuración que tiene el plugin, y empezaremos a atisbar lo que podemos hacer o, mejor dicho, lo que esta herramienta puede hacer por nosotros. Veremos que se le pueden pasar opciones de configuración en formato de objeto de JavaScript, y que los datos pueden obtenerse, mediante Ajax, de un script externo. Eso le brinda una potencia increible a DataTables, como veremos en este artículo.

El plugin DataTables (IV). Mejorando el aspecto.

Hasta ahora hemos usado el plugin viendo unas pocas opciones de configuración. En este artículo veremos muchas más opciones para configurar el plugin DataTables, de modo que podamos mejorar mucho el resultado final. Veremos cómo mejorar el aspecto de nuestra tabla, poner los mensajes en castellano, establecer que columnas de la tabla admiten ordenación y cuales no, y muchas más cosas. A partir de este artículo empezamos a prepararnos para conseguir un resultado auténticamente profesional con el mínimo esfuerzo, y de una forma clara y directa. Esto nos abrirá el paso para luego seguir avanzando y mejorando los resultados. Así, veremos que, con el plugin DataTables, lo que antes llevaba tres días de trabajo se puede hacer en media hora, y de una forma mucho más elegante robusta y fiable.

El plugin DataTables (V). Consumiendo datos externos.

Tenemos ya cierta soltura en el uso del plugin DataTables. Sin embargo, es mucho lo que aún nos queda por aprender para sacarle realmente partido a esta magnífica herramienta. En los artículos anteriores hemos estado sentando las bases de lo que se puede hacer con este plugin, pero ahora las apuestas han subido. Ya no jugamos con cerillas, sino emocionantes partidas en las ligas de campeones. En este artículo vamos a aprender a obtener los datos que queremos mostrar de una forma dinámica. Ya no estarán grabados a fuego en el código, sino que se nos generará un dataset a partir de una fuente externa, según le pidamos más y más al plugin. También aprenderemos las bases de cómo se comunica el plugin con el script secundario, en uno y otro sentido. Con lo que aprendamos en este artículo estaremos listos para pasar al siguiente nivel.

El plugin DataTables (VI). Combinar datos de varias tablas.

En el artículo anterior aprendimos a usar el punto más fuerte del plugin DataTables, que es poder renderizar una tabla con los datos que necesitemos obtenidos de una fuente externa. En este artículo vamos a hacer algo muy similar, pero obteniendo los datos a partir de más de una tabla. Este es el escenario más habitual que vamos a encontrar, y es necesario saber cómo hacerlo. Verás que los cambios son mínimos, y se pueden implementar sin ningún esfuerzo en nada de tiempo. Sólo hay que rediseñar la consulta adecuada para el dataset. Si entendiste bien el artículo anterior, ahora estás a otro nivel. Ahora juegas en las ligas mayores, y tienes que seguir ascendiendo. Déjame mostrarte el camino.

El plugin DataTables (VII). Búsquedas personalizables.

En este artículo vamos a dar un paso más en el uso del plugin DataTables. Vamos a ver que hay ciertos métodos que nos permiten realizar búsquedas de determinados registros de forma programática, buscando, por ejemplo, sólo por determinados criterios. Así, aunque todas las columnas de nuestra tabla sean searchables, podremos buscar un contenido específico en una o más de ellas, ignorando si ese contenido está o no en las demás. Esto nos permitirá programar búsquedas totalmente personalizables, usando los scripts que aquí veremos como guía para adaptarlos a nuestras necesidades.

El plugin DataTables (VIII). Ordenaciones complejas.

El artículo anterior fué especialmente intenso. No sólo aprendimos a hacer búsquedas muy selectivas en la base de datos para conseguir unos resultados concretos en la tabla. Además aprendimos que el plugin DataTables implementa métodos que se pueden usar por programación. Si aquel fué el artículo de las búsquedas, este es el de las ordenaciones. Vamos a aprender a ordenar, programáticamente, nuestra tabla de resultados según los criterios que podamos necesitar. Si bien las columnas, por defecto, permiten ordenaciones simples, con muy poca programación podemos obtener ordenaciones mucho más selectivas. Con una tabla con pocos registros esto puede parecer matar moscas a cañonazos. Sin embargo, cuando tu tabla llegue a tener cientos de miles de registros o, incluso, varios millones (y creéme; eso acaba sucediendo), agradecerás enormemente tener la mayor potencia posible en lo que a ordenaciones se refiere.

El plugin DataTables (IX). Preeditando datos.

En este artículo vamos a centrarnos en una operativa que resulta, en muchos casos, imprescindible. Se trata de modificar el script secundario para que, el resultado devuelto, incluya ciertos contenidos que, en principio, no están en la base de datos, pero que se basan en los que sí están. A ver, para entendernos. En un artículo anterior de esta serie aprendimos a modificar, en el script secundario, la fecha de ingreso, ya que, en la base de datos, se encuentra en formato aaaa-mm-dd (ISO 8601), que es el habitual para manejo interno, y debíamos obtenerla en formato dd-mm-aaaa, para que fuera legible para el usuario. En aquel momento ya nos estábamos asomando a un preprocesado de los datos antes de retornarlos al plugin DataTables del script primario. En este artículo vamos a ir un poco más allá, para seguir aprendiendo cosas que podemos hacer con este plugin.

El plugin DataTables (X). Datos desplegables.

En ocasiones tenemos demasiados datos para mostrar en la tabla. Por ejemplo, supongamos que tenemos, en nuestra lista de personal, o de clientes, o lo que sea, un campo de observaciones, o comentarios, de texto libre. Puede que, en algunos registros, el contenido de este campo sea tan grande que no podamos encajarlo, de forma cómoda, en una estructura tabular, ya que excedería el ancho de la pantalla, o descolocaría el resto de los contenidos. En esos caso, tenemos que buscar una alternativa, si debemos mostrar este campo junto a los demás. Afortunadamente, DataTables nos ofrece una solución muy conveniente a estos efectos. En este artículo vamos a ver como podemos colocar estos contenidos “ocultos”, de forma que la tabla incluya un enlace para desplegarlos de forma elegante, práctica y usable.