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: