En ocasiones podemos encontrarnos, al visualizar un dataset en forma tabular mediante DataTables, con un problema que no todos los desarrolladores tienen en cuenta, pero que los usuarios sí perciben cuando se produce. Es el exceso de información. Si tu tabla tiene tres o cuatro columnas, normalmente será cómoda de visualizar. Si tiene quince o veinte, es posible que sea, cuando menos, una tarea engorrosa obtener una visión de conjunto de los datos que tenemos en pantalla. Si, además, ocurre que, de las veinte columnas, sólo nos interesan los datos de la tercera, la séptima, y la décimo cuarta, el exceso de datos es una molestia más que regular.

Afortunadamente, con DataTables podemos ofrecerle al usuario la posibilidad de ocultar y volver a mostrar las columnas que desee, cuando lo desee. En este artículo vamos a aprender a usar esta funcionalidad, que resulta especialmente útil cuando hay muchos datos.

EL SCRIPT PRIMARIO

En este artículo hemos preparado el script con unos botones, en la parte inferior de la página, que permiten ocultar y mostrar las distintas columnas de la tabla. Se llama articulo_11.php y su listado es el siguiente:

El resultado de cargar esta página lo ves a continuación:

Si pulsas cualquiera de los botones, se cambiará de verde a rojo y la columna correspondiente se ocultará, como si hubiera desaparecido. Si lo vuelves a pulsar, se volverá a cambiar a verde y la correspondiente columna volverá a mostrarse.

Vamos a ver, en las líneas resaltadas, qué es lo que hemos hecho. El primer bloque resaltado, entre las líneas de la 38 a la 62, no tiene nada de particular. Sólo es la implementación de los botones de la parte inferior. Observa que les hemos añadido la clase boton_ocultar_mostrar, para poder referenciarlos en grupo desde jQuery.

El segundo bloque resaltado, entre las líneas 124 y 129 es el que hace todo el trabajo y es el que nos interesa. Observa que lo primero que hacemos es detectar cuando se produce una pulsación en alguno de los botones. Una vez detectada, leemos el índice que tiene el botón en la colección de los que nos interesan, que son los que tienen la clase boton_ocultar_mostrar. Una vez más, estamos haciendo un uso interesante del método .index(), nativo de jQuery, cuya documentación oficial puedes ver aquí. Cómo los botones están dispuestos en el mismo orden que las columnas, los índices que tienen coinciden con los de estas.

El siguiente paso es activar o desactivar la clase btn-danger, que pone el botón correspondiente en rojo. Como la clase btn-success, que pone el botón en verde, siempre está subyacente, ya que se la aplicamos al botón en el HTML, la clase btn-danger se “monta” encima, dejando sólo el color rojo. Al desactivarla, queda visible el verde. El método .toggleClass() permite aplicar y quitar una clase a un elemento, cómo ves aquí.

A continuación referenciamos la columna que tiene el mismo índice que el botón pulsado, mediante el método .column(), nativo de DataTables, que ya conocemos de ejercicios anteriores. A este le aplicamos el método .visible(), también nativo de DataTables. Este método devuelve un valor true o false, según la columna indicada sea visible o no, si no le aplicamos ningún argumento. Si le aplicamos un argumento booleano establece la condición de visibilidad u ocultación de la correspondiente columna. Lo que hacemos, por lo tanto, es que, en cada pulsación, cambiamos el valor que recibe este método. Si es true, recibe false y si es false recibe true. Lo hacemos con la siguiente línea:

columna.visible(!columna.visible());

Y ya está. Es así de fácil. ni siquiera es necesario realizar ningún cambio en el script secundario. Te lo reproduzco a continuación para que puedas copiarlo en tu ordenador y probar el funcionamiento de este ejercicio. Se llama datos_externos_11.php:

Como siempre, te puedes descargar los scripts y la base de datos en este enlace.