Páginas

terça-feira, 26 de fevereiro de 2013

Ordenar HTML table com javascript



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 Email 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.

atenciosamente,
Gustavo Marques

4 comentários:

  1. Ótimo script,
    valeu por compartilhar.

    ResponderExcluir
  2. 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 !!

    ResponderExcluir
  3. Agradeço pela contribuição...funciona perfeitamente, usando php com Bootsrap e acessando Mysql...Muito obrigado. Abraço

    ResponderExcluir

Veja também

Related Posts Plugin for WordPress, Blogger...