Ordenar tus tablas con sorttable

El uso de las tablas es un punto comun en casi todas las webs hoy en día y una de las mejores maneras de organizar la información, pero muchas veces no optimizamos su uso.

Pongamos un ejemplo:

Nombre	Apellidos	Puesto	Salario	Teléfono
Jose	Rodriguez	Jefe de Proyecto	2200	97658948
Juan	Martin	Programador Junior	800	98432423
Manuel	Ramirez	Programador Senior	1300	98764829
Rafael	Jimenez	Ayudante de Programación	800	98728332

Esta sería la clásica estructura para una tabla, pero que pasaría si la vieramos desde el lado del usuario, seguro que le encantaría poder interactuar con ella y ordenar sus datos.

Pues esta mejora es muy sencilla de realizar y supone un gran cambio en la funcionalidad de nuestras tablas.

¿Cómo hacerlo?

Podríamos utilizar ORDER BY una y otra vez en nuestras consultas y hacer recargos de página… pero sería demasiado rudementario. Existen numerosos de Javascripts que hacen esta función, mi preferido es sorttable.

Uso de Sorttable

Nombre	Apellidos	Puesto	Salario	Teléfono
Jose	Rodriguez	Programador Junior	800	97658948
Juan	Martin	Programador Junior	800	98432423
Manuel	Ramirez	Programador Senior	1300	98764829
Rafael	Jimenez	Jefe de Proyecto	2200	98728332

Cómo puedes observar tus tablas ahora son interactivas y las puedes ordenar de mayor a menor y al contrario simplemente con un click.


Lo mejor de el script utilizado es que reconoce y ordena diferentes tipos de datos y los reconoce automáticamente.

Fácil Instalación

1. Incluye la libreria Javascript enlazandola en la etiqueta HEAD de tu código

2. Enlaza la tabla con la clase sortable:

table class=”sortable”

3. Asegurate de que tu tabla tiene un ID:

table class=”sortable” id=”unique_id”

Esto es todo lo que necesitas. A partir de ahora tus tablas tendran columnas interactivas.

Sólo queda el diseño que es cosa tuya, basate en esta hoja de estilos:

/* Tabla Sortable */
table.sortable a.sortheader {
background-color:#eee;
color:#666666;
font-weight: bold;
text-decoration: none;
display: block;
}
table.sortable span.sortarrow {
color: black;
text-decoration: none;
}

Descarga sorttable.js