TableSorter plugin para ordenar tablas con jQuery

Tablesorter es un plugin de jQuery que nos permite ordenar una tabla estándar HTML con etiquetas THEAD y TBODY sin actualizaciones de página. tablesorter puede analizar correctamente y clasificar muchos tipos de datos.

jQuery tablesorter

Podéis encontrar este plugin en la siguiente página: https://mottie.github.io/tablesorter/docs/

Características

• Ordenación de varias columnas.
• Ordena textos, monedas, números enteros (int), números reales (float), direcciones IP, fechas (ISO, formato largo y corto), tiempo, etc…
• Ordenación por varios criterios a la vez.
• Opción de ampliar funcionalidad con el uso de widgets.
• Compatibilidad con Navegadores: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
• Versión mínima del código fuente disponible.

Ver demo en funcionamiento.

Como poner en funcionamiento el plugin

Debemos añadir los dos scripts, uno con la librería de jQuery y otro con el plugin Tablesorter:

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

Luego añadimos a nuestra tabla HTML la clase tablesorter, importante que nuestra tabla disponga de THEAD y TBODY:

<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>

Finalmente para poner en marcha el plugin debemos iniciarlo en la función ready de jQuery:

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);

Última modificación: oct 17, 2024