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;
}
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
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
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