Ordenar datos de una tabla por columna con jQuery
Cuando listamos una considerable cantidad de datos en una tabla, a veces queremos ordenarlos por alguna columna en concreto. Una solución sería hacer consultas a la base de datos para ordenar los resultados, pero con Tablesorter podemos hacer ésto mismo sin necesidad de recargar la página y hacer consultas a la base de datos.
Tablesorter está desarrollado con jQuery y su uso es realmente sencillo, además tiene distintas opciones para personalizar la tabla/s que queremos ordenar.
Lo que hay que hacer es incluir la librería jQuery y el archivo jquery.tablesorter.js
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.tablesorter.js"></script>
Este plugin funciona con las tablas estándar de HTML, es decir, aquellas que tienen las etiquetas <THEAD> y <TBODY>. Por ejemplo:
<table id="myTable" class="tablesorter"> <thead> <tr> <th>Last Name</th> <th>First Name</th> <th>Email</th> <th>Due</th> <th>Web Site</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>
Y ahora le decimos qué tablas queremos ordenar:
$(document).ready(function() { $("#myTable").tablesorter(); } );
Si queremos ordenar más de una tabla, cambiamos el selector por una clase:
$(document).ready(function() { $(".tablesorter").tablesorter(); } );
Ahora todas las tablas con la clase «tablesorter» se podrán ordenar por columnas.
Podéis descargar, obtener más informacion y ver una demostración desde su página oficial: