Webmaster Libre

Desarrollo web con software libre

Buscador

Sorttable: Haz que todas tus tablas puedan ordenarse

A pesar del paulatino repudio de los desarrolladores web hacia las tablas, éstas siguen teniendo su función: mostrar datos de forma tabular. Obvio, ¿no?

Cuando nos encontramos ante una tabla de datos, puede surgirnos la necesidad de permitir a nuestros usuarios ordenar los datos (por orden alfabético, de mayor a menor…). Esto que, en principio es algo simple, puede envolver múltiples líneas de código PHP, consultas a la base de datos y recargas de la página…

Sorttable
es un sencillo script javascript, creado por Stuart Langridge, con el que podremos convertir los encabezados de la tabla en objetos sobre los que hacer click para ordenar los datos.

Imagen de una tabla usando sorttable

Sin recargas de página ni complicados códigos, simplemente se carga el script en el header de la página y asociamos las tablas que queramos hacer interactivas mediante una clase. La personalización corre de tu cuenta editando unas líneas de CSS.

Entre las múltiples ventajas del uso de este script destacan dos: es totalmente no obstrusivo y es capaz de detectar el tipo de datos contenidos en una columna y ordenarlos adecuadamente de forma automática.

En Tu Función tenéis todas las instrucciones detalladas y una tabla de ejemplo.

Sorttable: http://kryogenix.org/code/browser/sorttable/

Otras entradas

Esta entrada fue publicada por Alma Fernández el Lunes, 7 de Agosto de 2006 y está archivada en: Javascript, Scripts. Puedes dejar un comentario, o enviar un trackback desde tu sitio.

1 Comentario

Agrega el tuyo
  1. [...] Hace tiempo hablabamos de SortTable, un script que permitiría que nuestros usuarios ordenasen las columnas de nuestras tablas de mayor a menor tanto numérica como alfabéticamente. [...]

    Webmaster Libre » Archivo del weblog » Unobtrusive Table Sorting (Revisited) 3 Noviembre, 2006

Comentar:

Algunas etiquetas HTML permitidas:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Blogalaxia BlogESfera - Directorio de Blogs Hispanos Web Developement Blogs - BlogCatalog Blog Directory