unijimpe

TableSorter es un plugin para jQuery que te pemitirá convertir las tradicionales tablas de datos en tablas interactivas con la posibilidad de ordenar los datos por columnas y todo ello con pocas líneas de código.

Entre las características mas destacables tenemos: ordenamiento por múltiples columnas, interpreta y ordena por texto, URLs, enteros, moneda, números flotantes, direcciones IP, fecha, hora entre otros. Adicionalmente es soportado en la mayoría de browsers (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+).

Utilizando TableSorter
Para utilizar esta librería lo primero es descargar la ultima versión de jQuery y luego el archivo jquery.tablesorter.js. Luego de ello incluimos estas librerías en el header de nuestro HTML.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>

Lo siguiente es incluir nuestra tabla de forma normal, teniendo cuidado en asignarle un identificador y utilizar los tags thead y tbody para separar los títulos del contenido en la tabla como se muestra a continuación.

<table id="myTable"> 
<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> 

Para finalizar hacemos un llamado a la función tablesorter indicando mediante el identificador a que tabla le aplicamos el ordenamiento.

<script type="text/javascript">
$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);
</script> 

Con esto ya tenemos nuestra tabla con las opciones para ordenar, obviamente lo que le hace falta es aplicarlo estilos para mejorar la apariencia con lo cual logramos obtener un buen resultado como el mostrado a continuación.

Obviamente este plugin tiene muchas opciones adicionales como definir ordenamientos iniciales, funciones para llamar al ordenamiento desde otros elementos entre otros, todo ello muy detallado y con ejemplos en el web original de TableSorter. Sin duda esta será una herramienta para mejorar la interactividad con la información que deseamos mostrar en nuestros webs.

Posts Relacionados

• jQuery Flash Plugin
• autoResize para textareas
• jQuery SWFObject Plugin
• jqPuzzle: Puzzles con jQuery
• EasyDrag jQuery Plugin