Tabelas (aquelas com dados tabulares) são elementos importantes, principalmente em sistemas web. É muito comum a presença de tabelas na listagem dos registros em um aplicativo CRUD. Abaixo temos um exemplo de uma dessas tabelas:
Clique aqui para fazer o download do exemplo ou aqui para visualizar o exemplo no navegador.
Utilizando algumas ferramentas jQuery vamos dar uma vida nova para tabelas e seus dados. Efeitos como uma cor diferente no mouseover, filtros, ordenação dos registros e paginação. Alguns desses efeitos utilizam apenas uma linha de código, enquanto outros serão proporcionados pelo plugin tablesorter.
Cores e destaque
Uma maneira eficiente de melhorar a exibição dos dados é aplicar cores diferentes às linhas pares e ímpares da tabela. O jQuery oferece os seletores odd e even para esta função e a linha a seguir resolve nosso problema:
[cce lang=”jquery”]
$(‘table > tbody > tr:odd’).addClass(‘odd’);
[/cce]
Toda linha ímpar da nossa tabela receberá a classe odd, definida via CSS:
[cce lang=”css”]
table tbody tr.odd td{ background-color:#ffffcc; }
[/cce]
Caso você ainda não conheça muito bem a sintaxe HTML das tabelas, talvez esse seja o momento. É importante que suas tabelas possuam os elementos thead e tbody para nossos exemplos funcionarem.
Outro detalhe do código jQuery exibido acima é a utilização do sinal “>” no seletor. Isso significa que o método será executado apenas no primeiro tbody filho da tabela e em suas trs filhas diretas, evitando que, caso exista uma outra tabela dentro da sua tabela, ela também receba a classe em suas linhas, podendo gerar alguma confusão.
E que tal destacar as linhas da tabela toda vez que o usuário passar o mouse sobre elas? Nesse caso utilizaremos o método hover:
[cce lang=”jquery”]
$(‘table > tbody > tr’).hover(function(){
$(this).toggleClass(‘hover’);
});
[/cce]
[cce lang=”css”]
table tbody tr.hover td{ background-color:#a9d0f5; }
[/cce]
O hover pode receber duas funções como parâmetros, a primeira para o mouseover e a segunda para o mouseout. No nosso caso passamos apenas uma função que será executada em ambos os casos, aplicando o método toggleClass na linha da tabela, adicionando a classe hover. O que o toggleClass faz é ativar/desativar automaticamente a classe especificada.
Selecionando registros
Agora vamos falar dos checkboxes da nossa tabela. Toda vez que o usuário marcar o checkbox de uma linha, a mesma deve receber uma classe (selected) que aplicar uma outra cor diferente, indicando que ela foi selecionada. Os checkboxes da nossa tabela poderiam servir, por exemplo, para uma exclusão em massa, ou exportação de dados.
[cce lang=”jquery”]
$(‘table > tbody > tr > td > :checkbox’).bind(‘click change’, function(){
var tr = $(this).parent().parent();
if($(this).is(‘:checked’)) $(tr).addClass(‘selected’);
else $(tr).removeClass(‘selected’);
});
[/cce]
[cce lang=”css”]
table tbody tr.selected td{ background-color:#a9f5a9!important; }
[/cce]
Note que associamos a função a dois eventos: click e change. O change vai ser importante quando implementarmos a função de marcar/desmarcar todos. Primeiro verificamos se o checkbox foi marcado ou desmarcado através do método/seletor .is(‘:checked’) e, de acordo com a situação, adicionamos ou removemos a classe selected.
O checkbox localizado no cabeçalho da nossa tabela marca ou desmarca todos os registros.
[cce lang=”jquery”]
$(‘#marcar-todos’).click(function(){
$(‘table > tbody > tr > td > :checkbox’)
.attr(‘checked’, $(this).is(‘:checked’))
.trigger(‘change’);
});
[/cce]
Acima você pode ver que o próprio seletor .is(‘:checked’) funciona como o true/false do atributo checked, ou seja, se marcarmos o checkbox do cabeçalho marcamos também todos os checkboxes dos registros. Precisamos também “forçar” o evento change para marcar/desmarcar as linhas com a classe selected. Isso é necessário porque o jQuery só considera como change quando o evento é aplicado com o mouse. A simples troca do atributo checked via jQuery não é considerado como evento change (não sei muito bem porque :)).
Pesquisando nos registros da tabela
Dependendo da sua tabela e dos dados exibidos é possível fazer uma busca rápida utilizando apenas javascript.
[cce lang=”html”]
[/cce]
Toda vez que o usuário digitar alguma coisa no campo pesquisar a tabela será filtrada automaticamente. Para isso utilizaremos o método/evento keydown. Também é importante desabilitar o submit do form, evitando que, ao pressionar enter no campo de pesquisa, o formulário seja enviado.
[cce lang=”jquery”]
$(‘#pesquisar’).keydown(function(){
var encontrou = false;
var termo = $(this).val().toLowerCase();
$(‘table > tbody > tr’).each(function(){
$(this).find(‘td’).each(function(){
if($(this).text().toLowerCase().indexOf(termo) > -1) encontrou = true;
});
if(!encontrou) $(this).hide();
else $(this).show();
encontrou = false;
});
});
// desabilita envio do formulário
$(‘form’).submit(function(e){ e.preventDefault(); });
[/cce]
No script acima estamos utilizando dois métodos/funções puros de javascript: toLowerCase e indexOf. O primeiro transforma os caracteres de uma string para minúsculo e o indexOf procura por uma ocorrência do termo pesquisado na string, retornando sua posição. O valor -1 significa que o termo não foi encontrado. Para cada linha da tabela, pesquisamos em suas células (td) pelo termo digitado no campo. Se o termo não for encontrado, a linha é escondida através do método hide.
Bônus: tablesorter
Pra finalizar, vamos dar uma passada em um poderoso plugin jQuery para tabelas: tablesorter. Como o próprio nome sugere, sua principal função é ordenar os dados da tabela clicando em seus cabeçalhos. No entanto, ele também vem acompanhado de um plugin para paginação dos dados utilizando somente javascript.
[cce lang=”jquery”]
$(“table”)
.tablesorter({
dateFormat: ‘uk’,
headers: {
0: {
sorter: false
},
5: {
sorter: false
}
}
})
.tablesorterPager({container: $(“#pager”)})
.bind(‘sortEnd’, function(){
$(‘table > tbody > tr’).removeClass(‘odd’);
$(‘table > tbody > tr:odd’).addClass(‘odd’);
});
[/cce]
[cce lang=”html”]
[/cce]
Não vou entrar muito em detalhes sobre as configurações do plugin, somente algumas observações. A propriedade dateFormat informa o formato de data a ser utilizado, no nosso caso dd/mm/aaaa (formato padrão na Inglaterra, logo o ‘uk’). Os headers 0 (o checkbox de marcar todos) e 5 (as ações editar/excluir) não devem permitir ordenação, devem estar desabilitados.
Adicionamos também o método tabelSorterPager. O HTML necessário é o exibido acima, com a quantidade de registros por página, os botões de primeira, anterior, próxima, última e um input para exibição das páginas.
E, por último, toda vez que a ordenação for aplicada, precisamos re-aplicar as cores nas linhas ímpares (que agora passaram a ser outras). Para isso utilizamos o evento personalizado do tabelesorter, sortEnd.