11082 Suscriptores al Feed del Blog
89 Suscriptores al Feed de Anotaciones Breves
43 usuarios online
diseño web valencia en 500 iconos gratuitos para tus aplicaciones web
Tablesorter: Ordenar tablas de una forma sencilla
0 COMENTARIOS - Publicado hace 22 meses - Clasificado en: JQUERY, TUTORIALES, TABLAS, JAVASCRIPT, DESARROLLOTablesorter 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();
}
);
Algunas entradas relacionadas:
- Construyendo un verdadero triple click con jQuery
- Autotab: plugin de jQuery para auto-tabulación y filtrado de campos
- Columnas de igual tamaño con jQuery
- Efecto "Nudging" con JQuery
- Cambiar propiedades CSS con JQuery
- Redimensionar el tamaño de fuente de forma animada con jQuery
- Filtro :random con jQuery
También te puede interesar:
|
|
|
|
|
