Tablesorter: Ordenar tablas de una forma sencilla

1 COMENTARIO  -  14/05/2008 -  Clasificado en: , , , ,

Tablesorter es un plugin de jQuery que nos permite de una forma muy sencilla ordenar las columnas de una tabla sin tener que refrescar la página. Puede ordenar por diversos tipos de datos (texto, números, monedas, fechas, ...) y posee múltiples opciones de personalización y ampliación.

Lo mejor es que es muy sencillo de utilizar. Lo primero que tenemos que hacer es enlazar en el head de nuestro documento a la librería jQuery y al plugin tablesorter. 

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

Ahora supongamos que tenemos una tabla como ésta. 

<table cellpadding="0" cellspacing="0" id="miTabla"> 
<thead> 
<tr> 
    <th>Nombre</th> 
    <th>Apellidos</th> 
    <th>Email</th> 
    <th>Cargo</th> 
    <th>Web</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Alfredo</td> 
    <td>Pérez  </td> 
    <td>apererez@gmail.com</td> 
    <td>Supervisor</td> 
    <td>http://jseomos.com</td> 
</tr> 
<tr> 
    <td>Francisco</td> 
    <td>Hernández </td> 
    <td>fhernandez@yahoo.com</td> 
    <td>Comercial</td> 
    <td>http://jseomos.com</td> 
</tr> 
<tr> 
    <td>Ana</td> 
    <td>Sanabria</td> 
    <td>anas@gmail.com</td> 
    <td>Comercial</td> 
    <td>http://jseomos.com</td> 
</tr> 
<tr> 
    <td>Javier</td> 
    <td>Díaz</td> 
    <td>jdiaz12@gmail.com</td> 
    <td>Administrativo</td> 
    <td>http://jseomos.com</td> 
</tr>
<tr>
  <td>Juan</td>
  <td>Alvez</td>
  <td>jalves@hotmail.com</td>
  <td>Técnico</td>
  <td>http://jseomos.com</td>
</tr> 
</tbody> 
</table>

Lo único de lo que nos tenemos que asegurar es que tenga un identificador -en este caso miTabla- y una estructura en la que aparezcan correctamente utilizados el THEAD y el TBODY.

Ahora tan sólo queda indicarle al plugin que tabla deseamos ordenar cuando el documento se haya cargado. 

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

Tablesorter » »

Si te ha gustado, puedes compartir este post en...
Posts Relacionados
Comentarios
Comentario realizado el 19/07/2010
José Carlos hola,

hay alguna forma de iniciar la ordenación, manualmente mediante un enlace, por que recibo la tabla mediante ajax,

un saludo,
josé carlos.
Deja un comentario

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados respecto al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados. Todos los comentarios serán moderados antes de su publicación por lo que su aparición en la web puede verse aplazada un cierto tiempo. Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com