Ordenar Tablas con Jquery
Para ordenar fácilmente tablas con Javascript, en este caso con Jquery (tablesorter), encontre esta librería creada por Cristian Bach. Acá un ejemplo de como quedaría el trabajo terminado.
Como primer paso necesitaremos descargar estas librerías:
- Jquery (Version 1.2.1 o Superior) Sitio oficial de Jquery
- jquery.tablesorter.min.js (12kb)
Si deseas conocer más sobre Jquery, te dejo este taller terico-práctico sobre esta excelente librería.
Una vez descargada las librerías debemos incluirlas entre las etiquetas <head> </head> de esta manera:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.tablesorter.min.js"></script>
Para darle un poco de estilo a la tabla adjunto algo de css:
table.tablaordenada {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablaordenada thead tr th, table.tablaordenada tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablaordenada thead tr .header {
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablaordenada tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablaordenada tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablaordenada thead tr .headerSortUp {
background-image: url(asc.gif);
}
table.tablaordenada thead tr .headerSortDown {
background-image: url(desc.gif);
}
table.tablaordenada thead tr .headerSortDown, table.tablaordenada thead tr .headerSortUp {
background-color: #8dbdd8;
}
Lo siguiente sería confeccionar la tabla a la cual queremos dar el orden:
<table id="tablaDemo" class="tablaordenada" border="0" cellpadding="0" cellspacing="1"> <thead> <tr> <th>Nombre/s</th> <th>Apellido</th> <th>Años</th> <th>Total</th> <th>Descuento</th> <th>Diferencia</th> </tr> </thead> <tbody> <tr> <td>Marcelo</td> <td>Perez</td> <td>30</td> <td>$9.99</td> <td>20.9%</td> <td>+12.1</td> </tr> <tr> <td>Juan </td> <td>Gomez</td> <td>60</td> <td>$15.99</td> <td>25%</td> <td>+12</td> </tr> <tr> <td>Mirtha</td> <td>Zaragoza</td> <td>20</td> <td>$15.89</td> <td>44%</td> <td>-26</td> </tr> <tr> <td>Julio</td> <td>Sosa</td> <td>46</td> <td>$103.22</td> <td>44.9%</td> <td>+80</td> </tr> <tr> <td>Pablo</td> <td>Ortellado</td> <td>21</td> <td>$11.19</td> <td>10%</td> <td>-86.7</td> </tr> </tbody> </table>
Ahora solo nos restaría dar funcionalidad a la tabla. El siguiente código agregar entre las etiquetas <head> </head> o al final del tag </html>:
$(function() {
$("#tablaDemo").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
});
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Buenas, he probado esto, y si muy bien, pero tengo un problema ¿que pasa con los porcentajes, cuando tienen diferente numero de caracteres , por ejemplo, 9% y 19%. Creo que los ordena mal.