Ordenar tabelas no navegador com técnicas javascript

Olá, a todos! Vou demonstrar uma ótima ferramenta para complementar o trabalho de renderização de dados no cliente. A única dependência é a utilização do framework de desenvolvimento JQuery.

Renderizar dados com tabelas é uma técnica muito antiga e largamente utilizada. Tabelas são muito úteis para gerar relatórios e visualização dos dados de forma prática. Com o crescimento do fluxo de dados na web, e o surgimento de novas necessidades dos usuários da web em busca de informações úteis, foi preciso criar formas para ordenação de dados, pois isso facilita bastante no processo de busca da informação, pois tendo a possibilidade de deixar os dados ordenados pela coluna de nome ou de data de modificação, por exemplo, temos bastante controle dos dados, e hoje em dia já é bem comum ver sites que fazem esse tipo de tratamento.

A solução trivial que muitos sites utilizam é para cada click em determinado título de coluna, fazemos requisições para o servidor e trazemos os dados novamente para o browser. Essa técnica funciona, mas não é uma solução viável para um sistema com muitos dados, e até mesmo para poucos dados não precisamos deixar o usuário esperando essa recarga quando temos soluções melhores.

Vamos à prática!

Temos a seguinte tabela para ordenar:

<table id="tablesorter-imasters"> 
<thead> 
<tr> 
    <th>Codigo</th>
    <th>Nome</th> 
    <th>Idade</th> 
    <th>E-mail</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>1</td> 
    <td>João Pereira dos Santos Neto</td> 
    <td>28</td> 
    <td>jpdsn_emailteste@gmail.com</td> 
    <td>http://www.jpdnteste.com</td> 
</tr> 
<tr> 
    <td>2</td> 
    <td>Maria Antonia da Silva Filho</td> 
    <td>37</td> 
    <td>madsf_emailteste@gmail.com</td> 
    <td>http://www.madsfteste.com</td> 
</tr>
<tr> 
    <td>3</td> 
    <td>José da Costa Souza Junior</td> 
    <td>19</td> 
    <td>jdcasj_emailteste@gmail.com</td> 
    <td>http://www.jdcasjteste.com</td> 
</tr>
 
</tbody> 
</table>

Essa é uma tabela html comum nos padrões W3C, com as tags "thead" para definir a área dos títulos e a "tbody" para definir onde está o corpo da tabela. Essa tabela pode perfeitamente vir de um banco de dados, xml, json... whatever, só depende da imaginação.

Para deixarmos essa tabela ordenável diretamente pelo cliente, é bem simples, precisamos importar a bilblioteca do JQuery e do JQuery table para a página:

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

*Essas bibliotecas estão no link de download no final do artigo, junto com um arquivo de css para uma estilização visual da tabela.

Agora que temos a biblioteca e seus recursos em nossa página, basta definir o comportamento para a tabela. No nosso caso temos a tabela com id = tablesorter-imasters.

Basta adicionarmos a instrução no comportamento com sistaxe JQuery, abaixo dos imports citados acima, assim:

<script type="text/javascript">
$(function() { 
            //aqui podem ter todas as outras instruções JQuery do site, sem perda
 $("#tablesorter-imasters").tablesorter();
            //aqui podem ter mais instruções JQuery, não importa a ordem
}); 
</script>

Pronto, agora temos uma tabela com dados ordenáveis de maneira bem simples...

Para quem quiser ver o exemplo completo, acesse este link.

Você verá o exemplo com a adição de um arquivo de css simples para estilização visual da tabela e o link para baixá-lo.

Até a próxima!