Nenhum produto encontrado nessa seleção.
Ordenar tabelas sem atualizar a página nunca foi tão fácil assim. Com o plugin Tablesorter, do jQuery, com apenas uma linha de código – literalmente – você ativa a ordenação para qualquer tabela que precisar em seu HTML. Além disso, ele também vem com temas prontos, preparados para mostrar os dados de maneira agradável ao usuário.
O Tablesorter funciona de maneira similar ao que encontramos em milhares de programas por aí, clique no cabeçalho, tabela ordenada. Por isso, você precisa criar o cabeçalho para a tabela, para que seja possível realizar a ordenação dos dados. Os dados são ordenados de maneira crescente ou decrescente. Ao clicar no cabeçalho de uma coluna e uma seta é apresentada indicando se está em ordem crescente ou decrescente.
Outro ponto interessante é que você também pode adicionar suas próprias funções para ordenação de valores de maneira mais precisa. Por exemplo: se você é desenvolvedor há tempos, já deve ter percebido que ordenar valores de datas no formato brasileiro (dd/mm/aaaa) é uma tristeza. Isso ocorre porque o sistema não compreende que a data 04/09/2014 é maior que 31/07/2014 (apenas um exemplo). Veja:
// Não funciona console.log( '04/09/2014' > '31/07/2014' ); // false // Invertendo a data funciona console.log( '2014/09/04' > '2014/07/31' ); // true
Vou explicar como fazer tais coisas a diante no artigo
Uma tabela HTML simples
Veja uma tabela HTML simples:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Tablesorter - Tutsup</title> <!-- Estilos necessários para o tema do tablesorter --> <link rel="stylesheet" href="css/blue/style.css"> <!-- jQuery e Tablesorter --> <script src="js/jquery-latest.js"></script> <script src="js/jquery.tablesorter.min.js"></script> <!-- Meu script --> <script src="js/scripts.js"></script> </head> <body> <table class="tablesorter"> <thead> <tr> <th>Cliente</th> <th>Nota</th> <th>Valor</th> <th>Total</th> <th>Data</th> <th>Classifica</th> </tr> </thead> <tbody> <tr> <td>Jorge Silva</td> <td>1</td> <td>1.2</td> <td>2.58</td> <td>20/04/1987 11:54:00</td> <td>A</td> </tr> <tr> <td>Osvaldo Monteiro</td> <td>2</td> <td>1.3</td> <td>2.55</td> <td>20/05/2014 11:55:00</td> <td>X</td> </tr> <tr> <td>Alana Oliveira</td> <td>3</td> <td>1.99</td> <td>2.51</td> <td>20/06/1998 11:59:00</td> <td>Z</td> </tr> <tr> <td>Silveira</td> <td>432</td> <td>0.99</td> <td>9.51</td> <td>20/06/2020 22:59:00</td> <td>Y</td> </tr> </tbody> </table> </body> </html>
Perceba que na tabela acima, existem 4 linhas destacadas, isso porque eu gostaria de ressaltar que as tags "thead" e "tbody" são necessárias, caso contrário o Tablesorter não funciona
Outro ponto importante é incluir os arquivos necessários para o funcionamento do plugin, são eles: jquery e jquery.tablesorter.min.js, o CSS é opcional. Todos esses arquivos estão dentro do head, conforme mostro no exemplo abaixo:
<head> <!-- Estilos necessários para o tema do tablesorter --> <link rel="stylesheet" href="css/blue/style.css"> <!-- jQuery e Tablesorter --> <script src="js/jquery-latest.js"></script> <script src="js/jquery.tablesorter.min.js"></script> <!-- Meu script --> <script src="js/scripts.js"></script> </head>
Isso é o que fará o tablesorter funcionar.
O jQuery
No jQuery você só precisa fazer o seguinte:
$(function(){
$('.tablesorter').tablesorter();
});
Isso iniciará o tablesorter na tabela com classe .tablesorter.
Datas no formato dd/mm/aaaa
Para criar um parser para a data no formato dd/mm/aaaa, basta fazer o seguinte:
// Parser para configurar a data para o formato do Brasil
$.tablesorter.addParser({
id: 'datetime',
is: function(s) {
return false;
},
format: function(s,table) {
s = s.replace(/-/g,"/");
s = s.replace(/(d{1,2})[/-](d{1,2})[/-](d{4})/, "$3/$2/$1");
return $.tablesorter.formatFloat(new Date(s).getTime());
},
type: 'numeric'
});
E adicionar a opção no número da coluna desejado (começando do zero):
$('.tablesorter').tablesorter({
// Envia os cabeçalhos
headers: {
// A segunda coluna (começa do zero)
1: {
// Desativa a ordenação para essa coluna
sorter: false
},
4: {
// Ativa o parser de data na coluna 4 (começa do 0)
sorter: 'datetime'
}
},
dateFormat: 'dd/mm/yyyy'
});
Veja o código completo:
$(function(){
// Parser para configurar a data para o formato do Brasil
$.tablesorter.addParser({
id: 'datetime',
is: function(s) {
return false;
},
format: function(s,table) {
s = s.replace(/-/g,"/");
s = s.replace(/(d{1,2})[/-](d{1,2})[/-](d{4})/, "$3/$2/$1");
return $.tablesorter.formatFloat(new Date(s).getTime());
},
type: 'numeric'
});
$('.tablesorter').tablesorter({
// Envia os cabeçalhos
headers: {
// A sgunda coluna (começa do zero)
1: {
// Desativa a ordenação para essa coluna
sorter: false
},
4: {
// Ativa o parser de data na coluna 4 (começa do 0)
sorter: 'datetime'
}
},
// Formato de data
dateFormat: 'dd/mm/yyyy'
});
}); Demonstração do tablesorter
Caso queira visualizar uma demonstração da utilização do tablesorter, acesse o link abaixo:
Muito legal!
Download do código
Caso queira baixar o código gerado nesse tutorial, acesse:
Mais detalhes
Caso queira mais detalhes sobre o tablesorter, basta acessar o site oficial:
No site existem mais exemplos e informações.
