jQuery logo

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.