Ordenar una tabla (af:table) desde la cabecera

Resumen: En este post vamos a ver cómo dar la opción al usuario, para que pueda ordenar los resultados, según el orden y criterio que quiera.

Para ellos nos ayudaremos de las propiedades sortable y sortProperty.

Con sortable, estamos indicando que se ve a permitir a esa columna o a la cabecera, ordenar los resultados de toda la tabla.

Con sortProperty, indicaremos qué propiedad utilizaremos para ello. Puede ordenarse por un valor distinto al que muestra la columna actual.
Para entender esto veamos nuestro ejemplo:

vista inicial de la tabla af:table

atributos de af:column

 Cambiamos el valor del atributo sortable por "true", así indicamos que Sí, queremos que se use como elemento de ordenación. 

cambio atrituto sortable

Guardamos los cambios y refrescamos la página (aunque ya saben que puede darnos resultados inesperados). 

vista ejecución de la página

Como se puede observar ha habido un pequeño cambio en la cabecera de las columnas que hemos cambiado la propiedad sortable.   

Aparece un pequeño borde, y también si pasamos el ratón por ahí, al cabecera parece clickable. 

Si pinchamos en la cabecera de Nombre sucede esto:

tabla ordenada por la cabecera

 

Los resultados de "toda" la tabla (no de la columna) se ordenan alfabéticamente por el campo Nombre. 

También nos aparece una flechita que nos indica el orden que se está siguiendo en ese momento (de menor a mayor). 

Si volvemos a pinchar en la cabecera Nombre, lo ordena de forma descendente.

aftable ordenado de forma descendente

Bien hagamos lo mismo con la columna Salario. 

tabla ordenada por columna salario

Como podemos observar, los resultados de la columna Salario, NO son los esperados. 

¿Qué es lo que ha pasado?

Si miramos el código nuevamente observamos una cosa: 

revisión valor sortproperty

El atributo sortProperty pone el valor "LastName" en vez de Salary, que era el esperado. 

Esto ha ocurrido porque anteriormente para crear esta columna decidimos copiar la columna de al lado, y cambiar el valor de la columna, pero no nos fijamos en otras propiedades que quedaron pendientes del cambio. 

En otras ocasiones, puede ocurrir que al ser un campo String, y los valores que guarde representen cantidades, la ordenación se haga como String, y no como cantidad (que es como lo vemos nosotros), y nos lleve a darle muchas vueltas del por qué de este fallo cuando todo "parece estar bien". 

Otros artículos relacionados
- Cambiar cabecera de columnas en una tabla (af:table)
- Cambiar ancho de una tabla (af:table)
- Colores alternados para una tabla aftable (banding)
- Mostrar un número diferente de elementos de una tabla (aftable)