Cachina’s Programming Blog


Paginação e Ordenação rápida com JQuery – Plugin Tablesorter

Posted in JAVASCRIPT por Mayron Cachina em janeiro 9, 2008
Tags: , , , ,

Pessoal, conheci essa biblioteca JavaScript só faz uma semana e ela já me quebrou um galho muito grande que a meses estava com preguiça de implementar na mão, hehehe Então mãos a obra (não irei explicar o JQuery nesse tópico, em outro faço uma breve introdução)…

1 – Precisamos das biblioteca e de seus plugins:

Bibliotecas JQuery

2 – Inserir as chamadas do JavaScript

<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="/path/to/
jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.pack.js"></script>

3 – Criar uma tabela

Tabela


<table id="example">
<thead>
<tr>
<th><div align="center">Descrição</div></th>
<th><div align="center">Editar</div></th>
</tr>
</thead>
<tbody>
<tr>
<?php
foreach ($this->array as $resultado){
echo "<td>".$this->escape($resultado->descricao)."</td>";
echo "<td><a href='$this->baseUrl/funcao/editar?id=".$this->escape($resultado->idfuncao)."&nome=".$this->escape($resultado->descricao)."'>
<img src = '".(PATH_IMG)."btn_editar.gif'></a></td>";
echo "</tr>";
}
?>
</tr>
</tbody>
</table>

4 – Inserir o seguinte Script:

$(document).ready(function()
{
$("#myTable").tablesorter();
}
);

Agora sua ordenação já está funcionando, lembrando que você terá que na tabela colocar o id da table, de acordo a função acima onde temo o nome #myTable

5 – Criando paginação

Paginação

<div id="pager">
<form>
<img src="<?php echo (PATH_IMG)."primeira.png"; ?>" class="first"/>
<img src="<?php echo (PATH_IMG)."anterior.png"; ?>" class="prev"/>
<input readonly type="text" class="pagedisplay"/>
<img src="<?php echo (PATH_IMG)."proxima.png"; ?>" class="next"/>
<img src="<?php echo (PATH_IMG)."ultima.png"; ?>" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>

Pronto, agora você tem uma tabela com ordenação e paginação funcional e simplesmente de fácil implementação!!!

Após você clicar em cima da <th> de “Descrição” será ordenado por ela da seguinte forma:

Tabela

*Obs: Veja a imagem do tópico 3 e compare.
Obs: Estou usando o ZendFramework então algumas funções como $this->escape desconsiderem e mudem de acordo com seu código😀

9 Respostas to 'Paginação e Ordenação rápida com JQuery – Plugin Tablesorter'

Subscribe to comments with RSS ou TrackBack to 'Paginação e Ordenação rápida com JQuery – Plugin Tablesorter'.

  1. valter said,

    Gostaria de saber se tem como funciona esse plugin dentro de re um request ajax na div? pois não tem geito de eu conseguir isso?


  2. Caro amigo Valter,
    Você quer fazer com que o plugin não leia todos os dados de uma consulta e a cada requisição leia a próxima página por ajax?

    Se for essa a pergunta, eu não consegui e foi um dos problemas que eu ví com esse plugin (pelo menos eu n consegui).
    Fiz um teste com 100000 registros e demorou quase 40 segundos para apresentar, ele faz uma busca por todos os registros e depois é que pagina, isso torna a consulta muito lenta e sobrecarrega o servidor.

    Se alguém já fez uma paginação dinâmica por favor comente aqui!
    Eu fiz uma classe em PHP para fazer paginação, se for essa a sua pergunta, eu posso depois coloca-la aqui.


  3. Ele aceita mais de uma tabela na mesma página?


    • Na versão que eu usava e fiz esse artigo n suportava…
      n sei agora🙂

  4. Lionel Mello said,

    Gostaria de saber se tem como usar esse plugin para paginar as fotos que estão dentro de um diretório?

    Abraços

  5. teogenes santos said,

    Bom dia Mayron, testei o lance da ordenação e achei do caramba, muito massa! só que não consegui utilizar a paginação! este é o código que eu estou utilizando:

    $(document).ready(function(){
    $(“#myTable”).tablesorter();
    }
    );

    Descrição

    10
    20
    30
    40

  6. Bruno said,

    A solução para paginação seria vc implementar nos links “<>” métodos que tenham como callback o tablesorter()

    assim vc coloca para carregar os dados com o ajax na tabela e aplica o tablesorter;

    abs


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s


%d blogueiros gostam disto: