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 (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 (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.

El plugin DataTables (XII). Datos dependientes.

Existen desarrollos de proyectos en los que la cosa no es tan simple como crear un tabla con datos. El usuario necesita ver, simultáneamente en la página, dos o más tablas, con datos de diferentes fuentes. Incluso es posible que, por ejemplo, los datos mostrados en la segunda tabla, dependan de un dato seleccionado de la primera tabla, de tal modo que, si hacemos click en un dato de la primera tabla, cambien dinámicamente los resultados que se muestran en la segunda. Esto, además, tiene un problema añadido. El monitor del ordenador (y la ventana del navegador) no es infinito, ni se estira como chicle. Hay que acotar el espacio, dentro de la ventana de navegación, que reservaremos a cada una de las tablas. En este artículo aprenderemos a resolver ambas situaciones, de un modo eficiente y elegante, que haga que el usuario tenga “a mano” los datos que necesite y se sienta cómodo trabajando con nuestra aplicación.

El plugin DataTables (XIII). Optimizando datos.

Este artículo es muy sencillo. Vamos a ver una forma alternativa de reconocer los campos retornados por el script secundario. Además, vamos a ver como, en la tabla HTML, se pueden seleccionar y deseleccionar uno o más registros. En general, vamos a ver algunas mejoras que podemos aplicar al uso de DataTables. Ninguno de los conceptos que vamos a exponer aquí cambian o invalidan nada de lo que hemos visto hasta ahora. Sin embargo, en una serie posterior de artículos veremos que nos aportan cierta comodidad y flexibilidad. Por eso los exponemos aquí, para tener ya una referencia, aunque, de momento, lo que vamos a ver parezca no aportar nada especial. Aún así, vale la pena para, que llegado el momento, tengamos estas características de DataTables como referencia, ya que las necesitaremos.