Ordenação de tabelas com jQuery
Postado por Gabriel Verta em 12/11/2009
Em mais um post de jQuery, venho apresentar-lhes o plugin tablesorter. Este plugin ordena as colunas de uma tabela a partir do clique no cabeçalho da mesma:
No código, basta adicionar o javascript e o css do tablesorter, além da biblioteca jquery:
<html> <head> <link rel="stylesheet" type="text/css" href="tablesorter.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.tablesorter.js"> </script> <script type="text/javascript"> $(function(){ $('.tablesorter').tablesorter() }) </script> </head> <body> <table class="tablesorter" cellspacing="1"> <thead> <tr> <th>first name</th> <th>last name</th> <th>age</th> <th>total</th> <th>discount</th> <th>date</th> </tr> </thead> <tbody> <tr> <td>peter</td> <td>parker</td> <td>28</td> <td>$9.99</td> <td>20%</td> <td>jul 6, 2006 8:14 am</td> </tr> <tr> <td>john</td> <td>hood</td> <td>33</td> <td>$19.99</td> <td>25%</td> <td>dec 10, 2002 5:14 am</td> </tr> <tr> <td>clark</td> <td>kent</td> <td>18</td> <td>$15.89</td> <td>44%</td> <td>jan 12, 2003 11:14 am</td> </tr> <tr> <td>bruce</td> <td>almighty</td> <td>45</td> <td>$153.19</td> <td>44%</td> <td>jan 18, 2001 9:12 am</td> </tr> <tr> <td>bruce</td> <td>evans</td> <td>22</td> <td>$13.19</td> <td>11%</td> <td>jan 18, 2007 9:12 am</td> </tr> </tbody> </table> <body> </html>
Na documentação oficial ainda, são listadas algumas das configurações possíveis, dentre as quais podemos destacar:
- Forçar ordenação inicial
- Ordenar tabela com link fora dela
- Adicionar conteúdo dinâmicamente a tabela com AJAX
- É possível criar um parser para ordenar conteúdo com seu próprio critério
- Integração com plugin de paginação
É isso ai 
Deixe um comentário |
