Às vezes fica difícil disponibilizar a função de ordenar uma coluna na tabela quando se tem muitos processos. Podemos dar exemplo uma lista de clientes com suas faturas, vencimentos e cobranças, há dezenas de regras aplicadas ao gerar aquela lista de clientes, disponibilizar uma função de ordenar por coluna pode se tornar difícil.

Para facilitar podemos usar o Jquery, há um plugin chamado TableSorter.
Você poderia criar este efeito ‘na mão’, com o jquery puro, sem plugins, mas para quê? Se já existe um plugin que faz tudo isso.

É mais simples do que você imagina.

Você pode fazer o download da versão Full release que é completa, ou se preferir faça download do arquivo jquery.tablesorter.min.js.

Colocando tudo nos devidos lugares, não se esquecendo de chamar o arquivo jquery na página, vejamos como configurar o recurso.

[sourcecode language='javascript']
jQuery(document).ready(function() {
$(“#tablesorter-clientes”).tablesorter();
});
[/sourcecode]

Sim, é só isso mesmo. Basta colocar o ID da tabela.
Você ainda pode configurar as colunas que terão este recurso ou ainda as que já estarão ordenadas por padrão. Veja abaixo:

[sourcecode language='javascript']
$(“#tablesorter-clientes”).tablesorter({
sortList: [[3,1]],
headers: {
5:{sorter: false}
}
});[/sourcecode]

Linha 02: sortList abre o parâmetro de ordenação padrão, ou seja, é para eu marcar uma coluna que estará ordenada sempre que esta tabela for mostrada. Sua configuração [3,1] diz para pegar a quarta coluna (Lembre-se que javascript começa a contar a partir do zero) e marcar como decrescente.

Explicando melhor: [coluna,ordem] Onde coluna é o numero da coluna escolhida, iniciando em zero. Ordem como valor 0 fica em ordem crescente, com o valor 1 fica com ordem decrescente.

Linha 03: Abre o parâmetro para configurar os Headers.

Linha 04: No caso mostrado, o valor 5 é a coluna(iniciando em zero) escolhida. Sorter:false diz para não aplicar ordenação nessa coluna. Você pode desativar a ordenação em mais de uma coluna da seguinte forma: 4:{sorter: false},5:{sorter: false}

Dica: Atenção no arquivo css e nas imagens. O css que puxa as setinhas do header, caso elas não apareçam é porque você não puxou o css na página ou o css não está conseguindo encontrar as imagens.

Para mais informações, veja a documentação do plugin: http://tablesorter.com/docs/

Você ainda pode usar os Widgets que eles disponibilizam, eu não usei nenhum, não achei necessário, mas caso prefira, vá fundo.

Até a próxima.