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.

PREPARANDO EL ENTORNO

Lo primero es preparar el escenario para tener esos contenidos que, en principio, desbordarían nuestra tabla. Lo que vamos a hacer es, en la tabla personal de la base de datos que estamos usando, agregarle (con PHPMyAdmin o cualquier otra herramienta similar) un campo llamado comentarios, de tipo text (texto libre). A continuación pondremos un texto de pruebas (el que queramos), en los campos de los 57 registros que tenemos. Para facilitarte el seguimiento de este artículo, te dejo aquí la base de datos modificada.

EL SCRIPT PRIMARIO

Ya tenemos nuestros datos de tal forma que, como hemos apuntado, existe un campo de texto libre, que puede tener un contenido más amplio de lo que podemos encajar en una estructura tabular. Lo que vamos a hacer es crear una columna, a la izquierda de la tabla, que no contenga datos. En su lugar, tendrá un icono con el signo más (+) o el que decidamos, para desplegar este campo debajo del registro correspondiente. Cuando este campo esté desplegado aparecerá cómo si fuese una fila más de la tabla. En ese momento, el icono cambiará a un signo menos (-). Si lo pulsamos, esta fila se replegará de nuevo, desapareciendo de la vista. El script primario se llama articulo_10.php:

En el listado superior vemos el código completo del script primario. Vamos a fijarnos en las novedades, que son las líneas que están resaltadas.

En primer lugar, vemos que en la cabecera de la tabla HTML definimos una columna adicional al principio, sin rótulo de encabezamiento, como se ve en la línea 24:

<th>&nbsp;</th>

Esta columna será la que tenga los iconos para desplegar y replegar la fila con los comentarios de cada registro.

En la definición de las columnas, dentro de la creación del objeto DataTables, encontramos otra novedad, en las líneas 81 a 86:

{
    "className":         'celda_de_descripcion',
    "orderable":         false,
    "data":              null,
    "defaultContent":    '<div class="text-center fa fa-plus-circle" style="width:100%; color: #3dc728;"></div>'
},

Cómo todas las columnas, la que contendrá el icono para desplegar y replegar contenidos adicionales, también debe definirse. Sin embargo, se define de un modo particular. Hay que establecer algunos parámetros necesarios, en notación de objeto de JavaScript, cómo puedes ver, que son los siguientes:

• className. Hay que darles, a las celdas de esta columna, un nombre de clase específico, que luego nos servirá para referenciarlas desde jQuery.
• orderable. Esta celda NO debe ser ordenable, y debemos indicarlo explícitamente.
• data. Esta celda no contendrá ningún dato del dataset que recuperemos del script secundario. Por lo tanto, no podemos darle un número de índice, porque no vamos a meter aquí el contenido de ningún campo del dataset. Es necesario indicar, explícitamente, que el data es null.
• defaultContent. En realidad este es un parámetro que podemos establecer en cualquier columna de la tabla. Sin embargo, hasta ahora no lo habíamos necesitado. Indica cual es el contenido por defecto, a la carga de la página, si no se coloca ningún dato procedente del script secundario. En este caso, hemos decidido que, por defecto, en esta celda aparecerá el icono +.

Observa que el resto de las celdas que definen columnas no sufren modificación alguna con respecto al ejercicio del artículo anterior.

En las líneas 105 a 125 encontramos el jQuery y el JavaScript necesario para que el icono despliegue la fila con los contenidos complementarios, y cambie a un signo - cuando lo pulsemos, o los repliegue y cambie a un signo + si lo pulsamos de nuevo:

Aunque no vamos a entrar en detalles acerca del uso específico de jQuery, ya que eso es más propio de un tutorial dedicado a esta hetrramienta, si vamosa fijarnos que, cuando se hace click en una celda de la clase celda_de_descripcion (que es la clase que le asignamos a las celdas de la izquierda en la línea 80) se desencadena todo el proceso. En primer lugar se identifica la fila “más próxima” a la que contiene la celda sobre la que hemos hecho clic. Si te gusta jQuery, encontrarás el método .closest() muy útil para muchas cosas. Puedes verlo en la documentación oficial. A continuación definimos la fila completa en una variable llamada filaComplementaria. Lo hacemos mediante el método .row(), que es del plugin DataTables. Forma parte del una colección de métodos auxiliares que cumplen funcionalidades específicas para integrarlos en otros procesos. Básicamente, lo que hacemos es identificar cual será la fila de contenidos complementarios, y cual es la celda que se ha pulsado, y que referenciamos en la veriable celdaDeIcono.

A continuación comprobamos si la fila con los contenidos complementarios relativos al registro cuya celda del icono se ha pulsado está desplegada o no. Eso lo hacemos con el método .isShown(), que es nativo de DataTables (línea 110 del listado). Si está desplegada, cambiamos el icono de la celda a + y la replegamos, con el método .hide() (este es nativo de jQuery, cómo puedes ver aquí). Si está replegada, la desplegamos (en seguida vemos cómo), y cambiamos el icono de la celda izquierda a -.

Para desplegar la fila de tabla que contiene los datos complementarios (los comentarios, en este ejemplo), recurrimos a una pequeña función auxiliar llamada formatearSalidaDeDatosComplementarios. Esta recibe dos parámetros. El primero es una referencia al registro con el que estamos trabajando. Esto es importante, porque necesitamos desplegar la fila justo debajo de dicho registro, y con los datos que están asociados al mismo, en la base de datos. El segundo parámetro es el índice de campo que contiene los datos complementarios que se mostrarán en la fila desplegable. Fíjate que el índice es 7. Sin embargo, en la definición del objeto DataTables no existe una columna con índice 7. Esto es porque estos contenidos no los cargamos al inicio. Vendrán en el dataset que nos envíe el script secundario (en seguida lo vemos), pero son ignorados por el objeto DataTables que hemos creado, hasta que se despliega la fila destinada a mostrarlos.

La función formatearSalidaDeDatosComplementarios lo único que hace es renderizar un contenedor con los datos solicitados, cómo puedes ver en el código (líneas 119 a 125).

EL SCRIPT SECUNDARIO

El script secundario, datos_externos_10.php, obedece al siguiente listado:

Cómo puedes ver, el script secundario es prácticamente idéntico al del artículo anterior. La única novedad está en la línea 34 (resaltada en el código). Lo que hace es indicar un campo más (el campo de texto nuevo) en la matriz de campos que van a formar el dataset. Como las matrices empiezan a indexarse por 0 y este es el octavo campo, tiene el índice 7, que es el que mencionábamos en la línea 112 del script primario.

Prueba este ejercicio en tu ordenador, para que veas cómo funciona (te puedes descargar los scripts y la base de datos en este enlace). Te ayudará a comprender la operativa de esta nueva funcionalidad del plugin.