Evitar navegación.
Principal

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

Enlaces Relacionados


No funciona en un servidor Windows

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

no me funciona en tabla creada medianta ajax

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

Bueno, si pongo una tabla directamente, funciona la ordenación pero en la tabla generada mediante ajax, no me funciona... He probado:
1- Generando el encabezado de la tabla no desde el php como originalmente lo tenia sino desde el mismo objeto ajax y tampoco.

Parece que las funciones en el .js no tomaran en cuenta la tabla por haberse generado después con el ajax

Alguna solución?

Respuesta a: Es posible omitir la ultima fila de totales???

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/

Muy buena

Exelente utlidad, sencilla y de facil uso, los felicito

Ayuda o asesoria

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

Usandolo con asp.net

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

Estilos en la tabla

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

Las nuevas lineas funcionan

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

Solucionado mozilla

Para mozilla hay que definir el class de esta manera:

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

NO SE COMO

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

NO SE COMO HACERLO

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

no

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

Como hago para llamar la

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

Hola a todos, ¿como puedo

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.

No ordena mal.

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

No me funciona con decimales

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

Es posible omitir la ultima fila de totales???

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

Espero te ayude

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/

hola

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

mandamelos a

mandamelos a manugut@gmail.com

Saludos

Si funciona con registros de

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

sortable + base de datos

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

funciona con registros de base de datos???

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????

jejejeje te iba a contestar

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

Saludos

Perdon!!

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

La función funciona correctamente, es bunisima.

Una pregunta

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

ORdenar Tablas

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

Felitaciones

Además es muy facil de implementar....

Felitaciones

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

falla

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

y con DataGrid de Asp.net

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

Excelente

Revisado y aplicado.
Aplicación super simple. Excelente

Muy interesante

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

solicito

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

Enviar un comentario nuevo

El contenido de este campo se mantiene como privado y no se muestra públicamente.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Etiquetas HTML permitidas: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Saltos automáticos de líneas y de párrafos.

Más información sobre opciones de formato