Ordenar tus tablas con sorttable

Por el 5 de Agosto de 2006

en: Sin categoría

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

  • Entradas relacionadas:
  • No hay coincidencias

42 Respuestas a Ordenar tus tablas con sorttable

Avatar

Anónimo

7 de Agosto de 2006 a las 2:16 pm

Probado y aprobado. Simple de aplicar y muy útil.
http://www.freddygalvez.cl

Avatar

Anónimo

6 de Septiembre de 2006 a las 6:34 pm

Revisado y aplicado.
Aplicación super simple. Excelente

Avatar

Anónimo

12 de Septiembre de 2006 a las 3:13 pm

puedo utilizar esto con u datagrid de asp.net, y si no es asi, qu me recomiendan?

Avatar

Anónimo

9 de Octubre de 2006 a las 2:25 pm

si, anda muy bien, pero falla estrepitosamente cuando tiene que ordenar valores numí©ricos…
me ordena el 751.50 antes (o despuí©s) del 5526.30

Avatar

Anónimo

18 de Octubre de 2006 a las 6:33 pm

Es un muy buen javascript
Me funciona a la perfección (aunque no lo he probado mucho)…

Avatar

Anónimo

18 de Octubre de 2006 a las 6:34 pm

Además es muy facil de implementar….

Avatar

Anónimo

23 de Octubre de 2006 a las 1:58 pm

Felicito a la persona que lo publico en un blog español, la implementacion no es para nada de compleja, javascript es bastante potente para no tener que recargar el servidor en procesos, gracias nuevamente

Avatar

Anónimo

27 de Octubre de 2006 a las 12:06 pm

Porque no puedo utilizar la libreria que baje a mi equipo, el metodo llama a una que esta en una pagina web.

Avatar

Anónimo

27 de Octubre de 2006 a las 1:07 pm

Perdon, tenia una error y por eso no me funcionaba.

La función funciona correctamente, es bunisima.

Avatar

manu

27 de Octubre de 2006 a las 2:14 pm

jejejeje te iba a contestar explicandote algunas razones posibles por las que podrí­a no haberte funcionado….
Me alegro de que te gusta

Saludos

Avatar

Anónimo

27 de Octubre de 2006 a las 2:40 pm

Hola, he probado esa función con registros extraí­dos de una base de datos y no me sirve, solo cambia el registro que se encuentra en la primera fila por el que está en la última, puedes ayudarme????

Avatar

manu

27 de Octubre de 2006 a las 3:38 pm

Si funciona con registros de la base de datos, ten en cuenta que al estar en javascript es una aplicacion del lado del cliente que genera un array de la tabla una vez el servidor la ha devuelto, si me explicas un poco mas el problema te lo puedo resolver porque funcionar con registros de la base de datos funciona, haz una cosa crea un hilo en el foro y posteame aki la direccion que por alli te puedo resolver problemas de codigo ok??

Saludos

Avatar

Anónimo

30 de Octubre de 2006 a las 3:07 pm

No puedo hacerte un link al sistema, lo q puedo hacer es enviarte un par de archivos de prueba con los que he estado trabajando a ver si puedes ver el problema. Cualquier cosa puedes escribirme a mavir78@gmail.com y decirme a q dirección enviartelos…

Gracias

Avatar

manu

30 de Octubre de 2006 a las 4:06 pm

mandamelos a manugut@gmail.com

Saludos

Avatar

Anónimo

7 de Noviembre de 2006 a las 8:14 am

Hola, quisiera saber quí© ha sucedido??? supongo, por tu falta de respuesta que todo está mal

Avatar

Anónimo

10 de Noviembre de 2006 a las 11:37 am

Es posible omitir la ultima fila, digamos que son los totales de las columnas.

Avatar

Anónimo

5 de Enero de 2007 a las 1:09 pm

Buenas, espero que los Reyes Magos se porten bien con vosotros.

Estaba hace tiempo buscando algo para ordenar tablas y he localizado esta funcion.

Me la he bajado instalado y la tengo una tabla de prueba y hace las ordenaciones
correctamente, pero el problema esta en qeu tengo numeros con decimales (no se que
separador se debe poner si . o , he hecho la prueba con los dos y no funciona). A lo
que iba, tengo un ranking y por ejemplo me pone en primer lugar el 98, y asi hasta abajo y por ejemplo tengo 63 y luego 625.23 y me lo pone debajo del 63. Cuando en realidad el primero que tendria que estar seria el 625.23 y luego el 98 etc.

Asi con varios casos, es como si ordenase alfabeticamente no tuviese en cuenta el valor numerico, el valor absoluto del numero.

Si necesitais que ponga la tabla la pongo aqui.

Gracias por vuestra ayuda.

Antonio

Avatar

Anónimo

20 de Enero de 2007 a las 12:12 pm

Acabo de bajar tu codigo, pero la verdad no se como implementarlo me seria de gran ayuda si pudieras enviarmelo con una bd q contenga nombre y fecha o algun otro campo que quisieras añadir como tu ejemplo que tienes en tu pagina y ver como lo ligas, de antemano gracias y espero tu envio.
Mi nombre es Raúl Rodrí­guez Morales
e-mail cedmpue@hotmail.com
puebla, mexico

Avatar

Anónimo

20 de Enero de 2007 a las 1:49 pm

No ordena mal el problema esque tienes que especificar que tipo de datos tiene cada columna en la class del td hay varios tipos mira en la DOC numeri , ip etc..

Avatar

Anónimo

1 de Febrero de 2007 a las 9:27 am

Hola a todos, ¿como puedo evitar que pueda ordenar por alguno de los campos? Me explico, tengo una casilla que contiene solo imagenes y no quiero ordenar por imagen, aunque si quiero que esta se ordene en función de otro campo.

Avatar

jhon

26 de Febrero de 2007 a las 7:13 pm

Como hago para llamar la clase del para definirla esa fila como numerica y que no me la ordene como si fuera texto, esto resolveria el problema de los numeros que tienen decimales

Avatar

jhon

26 de Febrero de 2007 a las 7:17 pm

como especificar que tipo de datos tiene cada columna en la class del td ? perdonen mi ignorancia me podrian especificar como

Avatar

jota

26 de Febrero de 2007 a las 7:22 pm

como especificar que tipo de datos tiene cada columna, dicen que estop solucionaria el problema con decimales, alguien que me esplique como le agrego la clase al td por favor y disculpen la ignorancia

Avatar

jotin

26 de Febrero de 2007 a las 7:26 pm

como especificar que tipo de datos tiene cada columna, dicen que estop solucionaria el problema con decimales, alguien que me esplique como le agrego la clase al td por favor y disculpen la ignorancia

Avatar

Iran Vasquez

25 de Abril de 2007 a las 3:06 pm

Holas,
Muchos de nosotros usamos estilos en nuestras tablas, particularmente me refiero a diferenciar las filas intercalando un color, por ejemplo blanco, celeste, blanco, celeste, etc…, pues bien, al usar este script, que por lo demás está genial, nos damos cuenta que al poner la clase css en una columna, ésta se mueve junto con el contenido, por lo que editando un poco el codigo js lo solucionamos.

En el js: lineas 93 – 95

// We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
// don’t do sortbottom rows

var classTD=’td2′; //esta linea es nueva…td2=nombre de mi clase css

for (i=0;i if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) {

newRows[i].setAttribute('className',classTD); //esta linea tambien es nueva...

table.tBodies[0].appendChild(newRows[i]);

//cambia el estilo de la fila //esta linea tambien es nueva...
if (classTD=='td2') classTD='td3'; //esta linea tambien es nueva...
else if (classTD=='td3') classTD='td2'; //esta linea tambien es nueva...
}
}

// do sortbottom rows only
for (i=0;i if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) {

newRows[i].setAttribute('className',classTD); //esta linea tambien es nueva...

table.tBodies[0].appendChild(newRows[i]);

//cambia el estilo de la fila //esta linea tambien es nueva...
if (classTD=='td2') classTD='td3'; //esta linea tambien es nueva...
else if (classTD=='td3') classTD='td2'; //esta linea tambien es nueva...
}
}

En el html:

<--table width="200" border="0" align="center" cellpadding="0" cellspacing="0" class="sortable" id="idtabla"-->
< -tr bgcolor="#C7CADC" class="td1"-->
< -td >nombre< -/td>
< -td>apellido< -/td>
< -td>cosas< -/td>
< -/tr>
< -tr class="td2"->
< -td>pedro< -/td>
< -td>bala< -/td>
< -td>una cosa < -/td>
< -/tr>
< -tr class="td3"->
< -td>jose< -/td>
< -td>nano< -/td>
< -td>otra cosa < -/td>
< -/tr>
< -tr class="td2"->
< -td>abel< -/td>
< -td>foca< -/td>
< -td>dos cosas < -/td>
< -/tr>
< -/table>

Espero les sirva. ….Obvio que hay que sacar los comentarios….

Saludos desde Santiago-Chile

Avatar

Jorge

16 de Mayo de 2007 a las 6:12 pm

Las nuevas lineas funcionan a la perfeccion pero en firefox no me resulto me quedo todo en desorden (los estilos intercalados) al momento de ordenas las tablas

Avatar

Yahir

31 de Mayo de 2007 a las 6:16 pm

Hola que tal,

tu código este muy bien hecho, uno de los mejores que he visto, le entendi rápido.

Tengo un problema, a la hora de que ordena la función se que detecta automaticamente el tipo de la columna, cuando son cadenas y numeros no formateados lo hace excelente. Pero cuando trata de ordenar con formatos con separador de miles no lo hace, lo hace pero como si la columna numerica fuese texto: ejemplo

col original
4,550.75
250.58
1852.00
1,000,000.50

lo ordena asi;
1,000,000.50
1,852.00
250.58
4,550.75

como puedo indicarle o pasar el valor a la funcion con formato numerico o decirle que es número. o mas bienc omo resolver este problemilla.

SALUDOS

Avatar

Anónimo

11 de Agosto de 2007 a las 11:23 pm

Creo que la funcionalidad está bárbara, pero intentando usarla en un datagrid con asp.net veo que hay problemas mientras no existe paginación. Cuando tienes paginado experimentas problemas: sólo puedes ordenar por la primer columna, aunque si lo haces de manera descendente te pone como primera fila el Footer (las flechas de página anterior y posterior). Si clickeás sobre el resto de las columnas no lo ordena, sino que muestra el siguiente error: “‘undefined’ is null or not an object”. Si alguine ha encontrado una solución que lo postee please. Gracias

Avatar

Anónimo

2 de Octubre de 2007 a las 12:09 pm

Exelente utlidad, sencilla y de facil uso, los felicito

Avatar

Pedro Chacín

28 de Abril de 2008 a las 1:39 pm

Hola, está muy bueno y fácil pero tengo un problema…
Mi tabla es generada mediante ajax en un div ejemplo:

Avatar

foreverjos

10 de Enero de 2008 a las 12:54 pm

Yo tuve el mismo problema al poner totales, mi solución baje la actualización de la clase, de esta pagina..

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

Avatar

Foreverjos

10 de Enero de 2008 a las 12:41 pm

Yo tuve el mismo problema con esta clase, mi solución baje la actualización de la clase de esta pagina.. esta mucho mejor..

Es posible omitir la ultima fila de totales???

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

Avatar

Anónimo

16 de Junio de 2008 a las 10:26 am

Para mozilla hay que definir el class de esta manera:

newRows[i].setAttribute(‘class’,classTD);

Avatar

David

14 de Agosto de 2008 a las 6:53 am

Hola a todos.

Como ya comente en su dia, esta utilidad me parece realmente buena, sin embargo al utilizarla en mi programa he tenido que corregir algunas cosillas que puede que os interese.

Por ejemplo si la tabla se genera dinamicamente, no es recomendable ponerle los estilos de las filas directamente, sino que se suelen sacar de un properties (en java) o algo por el estilo, bien he hecho algunas modificaciones para que mantenga los estilos de la tabla una vez ordenados los campos. Tambien hay algunas anotaciones por si quereis cambiar la imagen que aparece al ordenar por columnas (una flecha un poco cutre la verdad).

alguien puede decirme como puedo colgar el archivo en la web??

Gracias

Avatar

skuarch

9 de Octubre de 2008 a las 11:19 am

hola gracias por darnos este material esta excelente !

Avatar

David

13 de Agosto de 2008 a las 5:51 am

Me parece una funcion muy buena, pero la estoy provando en java y si la tabla tiene paginacion no funciona. Al clicar sobre una columna la ordena correctamente pero si pasas de pagina el orden se pierde.

¿Alguien puede decirme como solucionar esto?

Avatar

María

27 de Junio de 2008 a las 1:46 pm

Anteriormente en un servidor Linux funcionaba sin problemas pero ahora lo mismo en un servidor windows no funciona. Tenes idea que puede ser?

Avatar

javier

17 de Febrero de 2009 a las 12:22 pm

hola. estoy buscando algo que ordene fechas..
este scripts.. me parece de los mejores que vi.. pero como todos los demas. no ordena fechas…

Avatar

Yslow

2 de Marzo de 2009 a las 8:36 am

Para que ordene fechas debes ponerlas así:

AA / MM / DD

Por que si empiezas por Dias o Meses lógicamente las ordenara mal.

Avatar

Gerardo

19 de Febrero de 2009 a las 6:45 pm

Alguien me puede hacer el favor de decirme como implementar esta ordenacion para direcciones IP

Avatar

Luz

22 de Octubre de 2009 a las 2:38 pm

No puedo descargar el archivo me da error 404 que no se encontro la pagina.-

Avatar

tomyorke

13 de Enero de 2010 a las 3:20 pm

srs.

el sorttable es mejor q el tablesort de jquery… realmente facil implementación, el poder de javascript se encarga del resto.

para quienes tengan problemas con ciertos formatos de datos, les recomiendo leer la documentación en la cual aparecen soluciones para cada caso.

sl2

Dejar un comentario

Patrocinadores

¿Interesado en patrocinar TuFunción?

Suscripción

Primera División