Ordenar uma tabela da maneira tradicional (com order by na consulta no banco de dados) pode dar bastante trabalho. Precisamos receber a entrada do usuário sobre qual coluna ordenar e então usar essa coluna na cláusula order by. Além de trabalhoso isso exige várias idas ao banco, prejudicando a performance de todo o sistema. Um modo bem mais simples de se ordenar uma tabela é ordenar o <table> diretamente no HTML. Ao clicar no cabeçalho de cada coluna, a tabela inteira é ordenada por ela. Se clicar novamente na mesa coluna, então a ordem é invertida.
Faça o teste na tabela abaixo (clique nos nomes das colunas para ordenar):
id | Nome | Sexo | |
---|---|---|---|
1 | Gustavo | programador.gustavo@gmail.com | Masculino |
2 | Adriane | adri@gmail.com | Feminino |
3 | Bruno | bruno@yahoo.com | Masculino |
Para fazer essa ordenação diretamente no HTML precisaremos de um plugin do JQuery: tablesorter.
Vamos ver como implementar. Veja o código:
<html>
<head>
<title>Teste</title>
<!--Importa as bibliotecas necessárias-->
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.min.js" type="text/javascript"></script>
<style>
th{
cursor:pointer;
}
</style>
</head>
<body>
<table id="myTable" >
<thead>
<tr>
<th>id</th>
<th>Nome</th>
<th>Email</th>
<th>Sexo</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Gustavo</td>
<td>programador.gustavo@gmail.com</td>
<td>Masculino</td>
</tr>
<tr>
<td>2</td>
<td>Adriane</td>
<td>adri@gmail.com</td>
<td>Feminino</td>
</tr>
<tr>
<td>3</td>
<td>Bruno</td>
<td>bruno@yahoo.com</td>
<td>Masculino</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
</body>
</html>
Para que a ordenação ocorra, a tabela precisa ter as tags <thead> e <tbody> para orientar o script. O trabalho grosso o script já faz, agora podemos pesquisar os temas disponibilizados no site para melhorar a aparência da tabela, ou estilizar nós mesmos.
Gustavo Marques
obrigado...
ResponderExcluirÓtimo script,
ResponderExcluirvaleu por compartilhar.
Caro amigo, usei seu script numa página JSP, cheia de tags Struts e a tabela advinda do MySQL. Funcionou tudo perfeitamente. Obrigado pela contribuição !!
ResponderExcluirAgradeço pela contribuição...funciona perfeitamente, usando php com Bootsrap e acessando Mysql...Muito obrigado. Abraço
ResponderExcluir