Blog Reacción Estudio

¡Tu zona de aprendizaje!

Tablesorter

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

  • Julián

    Excelente!!, muchas gracias

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR