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

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


  • 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