Seguindo a série de artigos sobre os Plugins do Framework jQuery, hoje apresentarei dois de uma só vez!

O uso de tabelas (para dados tabulares, hein!) é muito comum na internet de hoje, com muitos sites dinâmicos.

Mas a maior parte dos clientes tem necessidades que só o HTML não propicia, como ordenação (classificação) crescente ou decrescente de uma coluna ou uma pesquisa por um determinado campo para filtrar os registros.

Assim, vou mostrar dois plugins do jQuery. O tablesorter, que faz a ordenação da tabela por colunas, e o quicksearch, que faz um filtro na tabela, pesquisando pelo valor que o usuário digita num campo texto.

Dê uma olhada no resultado final e me acompanhe!

Desenvolvimento

Como sempre (ou quase), os scripts que faço e disponibilizo aqui são Javascript Não-Obstrutivo.

HTML

O código HTML é extremamente simples. Os únicos detalhes ficam por conta da div #busca que será onde existirá o campo texto para pesquisa na tabela e a classe “busca”, na coluna da descrição do produto. Você pode ver o código do arquivo HTML aqui.

CSS

Como pode ser visto através deste link, o código CSS não tem mistérios ou macetes.

As únicas coisas que merecem atenção são as declarações das classes, que serão atribuídas aos elementos através do código dos plugins. Mas quando eu explicar o Javascript você vai entender legal… pode confiar.

Claro que para fazer modificações no estilo da tabela e demais elementos você precisará de um pouco de conhecimento de CSS ou da contratação de um profissional.

Javascript

Veja o código clicando aqui.

Linha 1: Atribui o código da linha 2 a 20 ao evento onload do nosso documento. No jQuery, o onload é sinônimo de ready.

Linha 2: Atribui a função tableSorter (do plugin tablesorter) à TABLE listagem, que é a nossa tabela que será ordenada.

Linha 3: String com o mesmo valor que está escrito no elemento TH da coluna a ser ordenada na inicialização. Mas tem que ser igualzinho!

Linha 4: Classe CSS que será atribuída ao título da coluna (elemento TH) quando esta estiver classificada em ordem crescente. Nesta classe CSS, é legal você colocar uma imagem que indique que esta coluna está ordenada e em que direção.

Linha 5: O mesmo da linha 4, porém para classificação em ordem decrescente.

Linha 6: O mesmo que a linha 4 e 5, porém quando a coluna não estiver ordenada.

Linha 7: Classe CSS que será atribuída a todos os elementos TD da coluna que está ordenada.

Linha 8: Classe CSS que será atribuída à linha (TR) clicada pelo usuário.

Linha 9: Classes CSS que serão atribuídas às linhas para fazer o efeito “zebrado”.

Linha 10: Define se ao inicializar, a tabela será “zebrada” ou não. Aceita os valores true ou false.

Linha 12: Atribui a função quicksearch (do plugin quicksearch) aos elementos TD que têm classe igual a “busca”, na tabela “listagem”.

Linha 13: Define o elemento que será ocultado quando o critério da busca não for atendido. Se definido como ‘parent’ (pai), o elemento ocultado será o TR, que é pai do “td.busca”. Se definido como ‘grandparent’ (avô), o elemento ocultado será o TBODY. Também pode ser definido como null, mas isso deixa o script sem funcionalidade. Recomendo não alterar esse valor.

Linha 14: Define a posição que o formulário de busca será inserido no elemento definido na linha 15. ‘prepend’ define que será inserido dentro do elemento, antes de qualquer conteúdo. ‘append’ determina que será inserido dentro do elemento, mas depois de todo o conteúdo. ‘before’ define que será inserido fora do elemento, porém imediatamente antes. ‘after’ é o inverso de ‘before’.

Linha 15: Define o elemento referência para a colocação do formulário de busca.

Linha 16: Define se o campo texto inserido terá o foco de digitação após o carregamento. Aceita os valores true ou false.

Linha 17: O mesmo que a linha 9.

Linha 18: Texto que aparecerá enquanto a tabela é filtrada.

Linha 19: Texto que aparecerá no label que é inserido antes do campo texto.

Ainda existem outras propriedades para ambos os plugins. Dê uma olhada na documentação e, caso tenha dúvida, é só perguntar através dos comentários.

Conclusão

Existem outros plugins do jQuery para ordenação e pesquisa em tabelas. Eu testei vários e achei esse o melhor por ser mais bonito e prático.

Espero que tenham gostado dessa explicação e dos exemplos.

Comentem!

Abraços.