Blog Reacción Estudio

¡Tu zona de aprendizaje!

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:

http://tablesorter.com