jQuery: Filtro de tabela estilo Excel 2003

Oba!

Terceiro post e já estou falando de jQuery.

Tem um certo tempo Semana passada ressurgiu uma necessidade: filtrar tabelas de páginas web de forma similar ao que fazemos em planilhes de excel.

Entao, por que não fazer em jQuery?

Abordagem do problema

Tabelas são feitas de linhas e colunas. Certo? Parece bobagem começar dessa forma, mas é a base do problema.

O que precisamos fazer basicamente e ler cada coluna de uma determinada tabela e gerar uma base de registros único desta tabela e trocar o cabeçalho por uma lista destes registros. Moleza.

Construindo as listas para filtragem

Para deixar as coisas mais interessantes, vamos utilizar apenas as colunas que tiverem uma classe especifica – neste caso defini a classe como “comFiltro” – marquei em negrito o que defini para filtro.

Idade Nome Cidade Email Endereço
22 João da Silva São Paulo asdjjhj@email.com Rua do Sobe Desce, 13
25 Maria da Penha Rio de Janeiro asdjjhj@email.com Rua do Sobe Desce, 13
36 Visconde de Mauá São João da Boa Vista asdjjhj@email.com Rua do Sobe Desce, 13
22 Ronaldo Zezzo Rio de Janeiro asdjjhj@email.com Rua do Sobe Desce, 13
10 André Gonçalves Rio de Janeiro asdjjhj@email.com Rua do Sobe Desce, 13
69 Graziella Nascimento São Paulo asdjjhj@email.com Rua do Sobe Desce, 13
33 Gabriel Lima São João da Boa Vista asdjjhj@email.com Rua do Sobe Desce, 13
34 Hélio Bertagnolli São João da Boa Vista asdjjhj@email.com Rua do Sobe Desce, 13
12 Carolina Souza São João da Boa Vista asdjjhj@email.com Rua do Sobe Desce, 13
10 Luciana Prado Vitória asdjjhj@email.com Rua do Sobe Desce, 13

Então fazemos o seguinte:

  • Buscar o primeiro tr dentro da sua tabela
  • Para cada th dentro dela vamos usar a funcao hasClass para descobrir se essa coluna deve ser filtrada.
  • Se sim, enfileiramos um booleano true.
    No nosso exemplo teríamos nessa fila {true; false; true; false; false}, ou seja apenas as colunas 0 e 2 teriam filtros habilitados. Isso é bem útil quando uma das colunas tem dados não normalizados, como no nosso exemplo o nome de uma pessoa – homônimos não são coisas realmente muito comuns, mesmo se você se chamar João da Silva.

Com esta tabela teremos o seguinte processo:

  • Varremos cada coluna e cada linha.
  • Para cada registro encontrado comparamos com o que já temos usando busca binária.
  • Se não estiver nessa lista inserimos na mesma e ordenamos (importante: ordene só se inserir, não gaste a maquina do seu pobre usuário ordenando a lista sem necessidade).
  • Depois de varrer todas as linhas e ter uma lista de registros únicos escrevemos o código HTML que vai ser a lista (não esqueça de dar um nome bacana para ela).
  • Inserimos no topo da lista o valor original do cabeçalho da coluna e depois os demais registros.
  • Trocamos o valor atual do topo da tabela pela tag html da lista para seleção.
  • Isto feito, podemos ligar o evento change da lista à função encarregada de efetuar o filtro na tabela.

Filtrando dados baseado nos resultados dos select lists

Recapitulando: definimos quais as colunas que devem ser filtradas, para cada linha e coluna identificamos se temos que ter filtros e adicionamos num vetor o valor atual; inserimos no topo da coluna a lista com os itens selecionáveis e atribuímos um evento quando o filtro tiver seu valor alterado. Vamos escrever a função que cuida desse evento.

Quando o evento for disparado:

  • Mostramos todas as linhas da tabela
  • Para cada célula do cabeçalho
  • Se houver uma lista de seleção
  • Filtrar cada linha visível, se algor for escolhido nessa lista e o valor for diferente, esconder a lista

Com isso temos um componente que funciona como filtro de tabela no Excel 2003 – o operador lógico entre os filtros é sempre E, nunca OU.

Exemplo funcional

Deixei um exemplo desse código todo no skydrive, leia o arquivo js e o post ao mesmo tempo, tudo fará sentido – eu acho.