Blog
Hoy en día es muy común tener que ordenar tablas con jQuery. Es por eso que en este tutorial aprenderemos a realizar esta tarea utilizando el plugin para jQuery llamado tableSorter. Este simple plugin permite ordenar tablas por columna de cualquier tipo, ya sea números, fechas o palabras.
¿Cómo ordenar tablas con jQuery?
Antes de comenzar a tirar código debemos incluir las dependencias de jQuery y del plugin tableSorter, este último lo pueden descargar desde su sitio oficial http://tablesorter.com/docs/#Download.
Una vez descargada podemos empezar con nuestro ejemplo. El siguiente código es el ejemplo más básico para ordenar una tabla con diferente columnas:
<html> <head> <title>Ordenar listas con jQuery</title> <style type="text/css">@import "themes/blue/style.css";</style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.tablesorter.js"></script> <script type="text/javascript"> $(function(){ //Cuando la página se cargue convertimos la tabla con id "myTable" en una tabla ordenable $("#myTable").tablesorter(); }); </script> <style> body{font-family:Arial;} </style> </head> <body> <table id="myTable" class="tablesorter"> <thead> <tr> <th>Nombre</th> <th>Apellido</th> <th>Email</th> <th>Compra total</th> <th>Web</th> </tr> </thead> <tbody> <tr> <td>Smith</td> <td>John</td> <td>jsmith@gmail.com</td> <td>$50.00</td> <td>http://www.jsmith.com</td> </tr> <tr> <td>Bach</td> <td>Frank</td> <td>fbach@yahoo.com</td> <td>$50.00</td> <td>http://www.frank.com</td> </tr> <tr> <td>Doe</td> <td>Jason</td> <td>jdoe@hotmail.com</td> <td>$100.00</td> <td>http://www.jdoe.com</td> </tr> <tr> <td>Conway</td> <td>Tim</td> <td>tconway@earthlink.net</td> <td>$50.00</td> <td>http://www.timconway.com</td> </tr> </tbody> </table> </body> </html>
La tabla anterior se puede visualizar en la siguiente captura de pantalla:
Es importante mencionar que el tema se puede cambiar o incluso crear uno propio con CSS.
Con ese código simple ya podemos ordenar una tabla con diferentes columnas. Es muy importante saber que este plugin admite muchas más configuraciones, estas mismas las pueden ver en el sitio oficial (ya mencionado antes) donde también pueden encontrar muchos ejemplos.
Bueno hemos llegado al final de este tutorial, espero que les haya servido y ante cualquier problema no duden en dejar un comentario.
Cuando se trata de números me da un error, segun su orden… si lo coloco por ejemplo, de menor a más…
1000
15000
2000
como pueden ver, el 2000 debería estar segundo.
Me pasa lo mismo, has podido arreglar el error Javier Moreno?
Hola, lo has conseguido?