====== 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. ===== Demonstração da funcionalidade ===== 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. {{:desenvolvimento:especificacoes:arquitetura:servicos:tabelas.png|}} ===== Utilização do recurso ===== Para utilizar os recursos deve-se, obrigatoriamente, importar o jQuery na página. Para isso, pode-se utilizar o seguinte código: Em seguida, deve-se importar os recursos que desejam ser utilizados. Para utilizar a ordenação das tabelas, adicione o seguinte código à JSP: Para utilizar a filtragem de conteúdo, adicione o seguinte código à JSP: 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. ... ...
Login Nome