Ordenação e filtragem de tabelas

Essa funcionalidade tem como objetivo adicionar a uma tabela HTML as funcionalidades de ordenação de colunas e filtragem de conteúdo. Através desse recurso, será possível clicar nas colunas de uma tabela para fazer a ordenação ascendente ou descendente dos itens da tabela pelo conteúdo da coluna que foi clicada. Será possível ainda adicionar a algumas colunas da tabela um campo de texto no qual será possível digitar um determinado conteúdo que será utilizado para filtrar os itens da tabela que começam com o texto digitado.

A utilização desses recursos é simples e envolve apenas a importação de alguns arquivos na JSP e a adição de classes CSS à tabela e às colunas da tabela que deverão possuir tais funcionalidades.

Na figura abaixo é possível ver uma tabela com os recursos abordados neste documento. É possível perceber que cada coluna dessa tabela tem uma imagem com setas para cima e para baixo que indica que ela é ordenável. Ao clicar na coluna, o conteúdo da tabela é automaticamente ordenado ascendentemente pelo conteúdo dessa coluna. Ao clicar mais uma vez na mesma coluna, a ordenação é mudada para a descendente. Na figura, a coluna Login foi clicada duas vezes, por isso a tabela está ordenada por login e de forma descendente.

Abaixo dos nomes das colunas pode-se perceber campos de texto. Esses campos podem ser utilizados para filtrar o conteúdo da tabela. A partir do momento em que digita-se algo nesses campos de texto, o conteúdo de cada linha da tabela, na coluna correspondente ao campo de texto, é verificado. Se o conteúdo da coluna casar com o conteúdo do campo de texto, a linha permanece visível, senão a linha é escondida, dando ao usuário a idéia de um filtro de dados.

Para utilizar os recursos deve-se, obrigatoriamente, importar o jQuery na página. Para isso, pode-se utilizar o seguinte código:

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

Em seguida, deve-se importar os recursos que desejam ser utilizados. Para utilizar a ordenação das tabelas, adicione o seguinte código à JSP:

<c:import url="/include/tablesorter.jsp" context="/shared"/>

Para utilizar a filtragem de conteúdo, adicione o seguinte código à JSP:

<c:import url="/include/tablefilter.jsp" context="/shared"/> 

Por fim, deve-se escolher a tabela para a qual o recurso está ativo e em quais colunas deve haver a filtragem de dados. Se a tabela deve ter ordenação, adicione a classe “tablesorter”. Se a tabela deve ter filtragem, adicione a classe “tablefilter”. Para as colunas que devem ter o filtro de conteúdo, deve-se adicionar a classe filter no cabeçalho dessa coluna, conforme pode ser visto no código abaixo, que foi utilizado para gerar a tabela da figura mostrada anteriormente.

<table class="tablefilter tablesorter">
<tr>
   <th class="filter">Login</th>
   <th class="filter">Nome</th>
</tr>
<tr>
   ...
</tr>
...
</table>