El plugin DataTables (VIII). Ordenaciones complejas.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

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

ORDENACIÓN INICIAL

Ya sabemos que DataTables ordena los registros, por defecto, por la primera columna (la que tiene el índice 0). Si esta la hemos establecido cómo no ordenable (orderable:false), se ordenarán por la primera que sea ordenable. Sin embargo es posible que queramos, inicialmente, que los registros aparezcan ordenados por otra columna que no sea la primera, incluso aunque esta sea ordenable.

Por ejemplo, supongamos que, en nuestro script primario, queremos que todas las columnas sean ordenables, pero que los registros se ordenen, al arranque, por la columna Apellido, que es la que tiene el índice 1. Además, queremos que se ordenen de forma ascendente, es decir, de menor a mayor (empezando por la A y terminando por la Z). Al configurar el plugin le añadimos la siguiente opción de configuración:

"order": [[1, "asc"]]

El script primario, articulo_08_1.php, queda así:

Observa la línea resaltada, dónde hemos incluido esta opción.

El script secundario no sufre cambios. Hemos usado una copia del que empleábamos en el artículo anterior. Aunque en este caso no empleamos las reglas de búsqueda por programación, no “piden pan”.

Esta opción se puede grabar con más de una columna. Por ejemplo:

"order": [[1, 'asc'], [5, 'desc']]

Esto ordenaría por la columna 1 (Apellido, en nuestro ejemplo) de forma ascendente y, si hubiera más de una persona con el mismo apellido, los ordenaría por la columna 5 (Salario, en nuestro ejemplo). de forma descendente.

ORDENAR POR PROGRAMACIÓN

También posible cambiar el orden de los registros por programación, una vez cargada la página. Hasta ahora sabemos que podemos hacer esa reordenación pulsando en la cabecera de las columnas que son ordenables. El problema es que sólo podemos ordenar por una columna a la vez. Por ejemplo, si pulsamos sobre la cabecera de la columna Apellido se ordenan los registros por esta columna. Si, a continuación pulsamos sobre la columna Salario, se ordenan por este otro campo, pero se pierde totalmente la ordenación por apellido.

Vamos a preparar una herramienta que nos permita ordenar los registros por más de un criterio, es decir, por un criterio y, manteniendo este, a su vez, por otro criterio distinto.

EL SCRIPT PRIMARIO

En el script primario recae toda la responsabilidad de solucionar esta necesidad. En este ejemplo hemos modificado este script creando articulo_08_2.php, que incluye un formulario para elegir hasta seis criterios de ordenación simultáneos (dado que contamos con seis columnas de datos). En realidad, raro será que necesitemos establecer los seís pero, ya que los tenemos, vamos a usarlos para ver cómo se hace. El listado de este script es el siguiente:

Las líneas que aparecen resaltadas son para crear, debajo de la tabla, un formulario tal que podamos seleccionar hasta seis criterios diferentes, en el orden que deseemos, indicando además, el sentido ascendente o descendente. El aspecto que tiene el formulario lo ves a continuación:

selectores_de_ordenacion

Este es el formulario que verás debajo de tu tabla al cargar la página. Empieza por probarlo. Selecciona un ccriterio en el primer combo (el único que aparece habilitado al principio. Entonces podrás seleccionar un sentido con los botones de radio (ascendente o descendente). Además, al seleccionar un criterio en el primer combo, se te habilitará el segundo, para poder seleccionar otro criterio. Si lo haces, se habilitará el tercero y, así, sucesivamente. Una vez que hayas seleccionado los criterios que desees (uno, dos o los que sean), pulsa el botón ordenar y verás que los elementos se ordenan por los criterios indicados, en el orden que los has establecido.

El código resaltado en el listado es, en su mayoría, jQuery para la gestión del formulario (creación de los combos y sus opciones, habilitación o inhabilitación de cada combo según se seleccione o no una opción en los anteriores, etc). Esa parte no la vamos a estudiar en este artículo, ya que no corresponde al uso de DataTables, sino que es jQuery puro y duro. Te sugiero que le eches un vistazo y, si tienes alguna duda sobre alguna sintaxis concreta recurras a la documentación oficial de jQuery.

Sí hay dos cosas en este código que si tienen relación con lo que estamos viendo sobre DataTables:

En primer lugar está el mecanismo que crea una matriz de criterios seleccionados. Cuando queremos efectuar una ordenación por programación, debemos crear una matriz JavaScript que almacene los criterios seleccionados para la ordenación, así cómo su sentido (ascendente o descendente). La referencia a las columnas de ordenación se hace mediante su índice (empezando por 0). Así, si queremos ordenar por la columna Apellido y, dentro de esta, por la columna Salario, los índices que necesitamos son 1 y 5, respectivamente. Si queremos que la ordenación se haga por Apellido de forma descendente y por Salario de forma ascendente, la matriz deberá contener los siguientes elementos:

[[1, "desc"], [2, "asc"]]

Como ves, cada elemento es una matriz y, a su vez, están todos los criterios elegidos dentro de una matriz en conjunto. El código jQuery tiene que ser capaz, cada vez que se cambia un criterio mediante los combos y los botones de radio, de recrear la matriz con todos los índices de las columnas y los corrspondientes sentidos de ordenación (Ascendente o Descendente). Además, las columnas deben estar en el mismo orden en que se hayan seleccionado en los combos. Por ejemplo, si el el primer como se selecciona la columna Ciudad en sentido Ascendente y el el segundo se selecciona Nombre en sentido Descendente, la matriz deberá ser así:

[[3, "asc"], [0, "desc"]]

No nos vale que sea así:

[[0, "desc"], [3, "asc"]]

Es decir. No sólo se deben respetar los criterios escogidos, sino también el orden en que han sido escogidos por el usuario.

La forma más práctica de mantener esta matriz es que, cada vez que se cambie un combo o un sentido de ordenación, la matriz se cree nueva, destruyendo la anterior, con todos los criterios seleccionados. De esto se encarga la función recrearOrdenaciones(), que vemos reproducida a continuación:

Esta función es invocada cada vez que se cambia el contenido de un combo o se pulsa sobre un botón de radio, cómo ves en las líneas 190 a 192 del listado completo.

La otra cuestión que queda pendiente es qué vamos a hacer con esa matriz, ahora que ya la tenemos. La respuesta es: nada. No hacemos nada… hasta que se pulsa el botón azul destinado a aplicar la ordenación. Observa el siguiente fragmento, en las líneas 194 a 198 del listado completo:

Lo que hacemos es actuar sobre el objeto DataTables, de una forma similar a como aprendimos a hacerlo en el artículo anterior que hablaba sobre las búsquedas. En este caso empleamos el método order(), que recibe, cómo argumento, la matriz de ordenaciones que hemos preparado anteriormente. Dado que esta es una variable global al código JavaScript, puesto que se declaró fuera de cualquier función, en la línea 94, el valor que se le ha asignado en la función recrearOrdenaciones() lo conserva cuando la requerimos al pulsar el botón.

Por último, encadenamos el método draw() (línea 199) que, como ya sabemos, redibuja la tabla con los datos actualizados.

CONSIDERACIONES FINALES

En este artículo hemos aprendido a programar ordenaciones personalizadas. No hemos hablado nada del script secundario, ya que, para este tipo de funcionalidad, no necesitamos realizarle ninguna modificación. De hecho, el script usado en estos ejemplos, datos_externos_08.php, es una copia exacta del que usamos en el artículo anterior.

Espero que, además, el código jQuery que hemos usado para la gestión del formulario te aporte algo que te resulte útil, ya que ha sido bastante laborioso.

Los scripts y la base de datos los tienes en este enlace.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *