Paginação Javascript

CSS, Javascript maio 16, 2010 Comentários: 46

Esse Post foi movido para :

http://clares.com.br/2010/05/16/paginacao-javascript/

Desculpe pelo transtorno, aproveite para assinar o novo blog.

46 pensamentos sobre “Paginação Javascript”

  1. Allan maio 17, 2010 às 3:22 pm

    Muito interessante esta técnica.
    Obrigado por compartilha-la!
    Uma dúvida, esse script paging.js só trabalha com tabelas ou pode-se trablhar somente com divs (tableless)?

    • Rafael Clares maio 26, 2010 às 4:29 pm

      Desculpe a demora, o pagin.js é para tabelas mas acredito ser possível fazer algo assim para divs, talvez o jquery seja uma boa para tentar fazer, abraços.

  2. Fábio maio 28, 2010 às 11:55 am

    Boas Rafael,
    Parabens pelo script dá muito geito e está bem simples de usar… ;)

  3. Vitor A. Vale maio 28, 2010 às 1:43 pm

    Rafael parabéns, seu script foi bastante útil, além da facilidade na adaptação para o que necessitava.

  4. THyago Trajano junho 22, 2010 às 5:35 pm

    Olá Rafael. Obrigado pelo código, funciona perfeitamente, porém gostaria de saber se tem como fazer paginação em duas tabelas na mesma páagina…eu tentei…até que faz a paginação, mas ao se clicar na tabela2, por exemplo, muda o fundo azul do link na de cima…o que será? abraços

    • Rafael Clares junho 22, 2010 às 6:10 pm

      Thyago, basta trocar mudar o id da tabela e informar o novo ID no JS, ex:

      Para tb1:

      table id="tb1"

      var pager = new Pager(‘tb1‘, 2);
      pager.showPageNav(‘pager‘, ‘pageNav‘);
      pager.showPage(1);

      Para tb2:

      table id="tb2"
      var pager = new Pager(‘tb2‘, 2);
      pager.showPageNav(‘pager‘, ‘pageNav‘);
      pager.showPage(1);

  5. Leonardo de Jesus junho 26, 2010 às 2:03 am

    Obrigado pelo post, me ajudou a resolver um problema que estava tendo com asp classico e xml, nao estava achando uma forma simples de paginar os resultados. Muito obrigado!

  6. Kairon dezembro 25, 2010 às 9:22 am

    Muito obrigado cara :D

  7. Anderson dezembro 31, 2010 às 2:23 am

    Parabéns cara!

    Muito bom o código, simples d usar e muito funcional.

    Me ajudou muito, vlw msm!!!

  8. Paulo NagahamaPaulo setembro 13, 2011 às 5:03 pm

    Bom dia,

    Gostei da simplicidade do script, bom estou tentando paginar duas tabelas diferentes, fiz como vc disse ali em cima mas ai oq acontece é que só a primeira tabela fica com a indicação das páginas, e quando clico nos links – “1” “2” – ele muda a pagina da segunda tabela.

    Sabe oq pode ser?

    • Rafael Clares setembro 13, 2011 às 6:00 pm

      O id da tabela muda e o script também. Seria interessante postar o código js e os ids das tabelas.

  9. Cesar setembro 14, 2011 às 1:41 am

    Estava pensando de colocar um select para adicionar a quantidade de linhas exibidas, onde o usuário vai selecionar, o que acha?

    • Rafael Clares setembro 14, 2011 às 1:48 am

      Legal Cesar, isso aê boa sorte!
      Dica: criar uma função para alterar a quantidade

      function setPages(tbl, max)
      {
      var pager = new Pager(tbl, max);
      pager.init();
      pager.showPageNav(‘pager’, ‘pageNav’);
      pager.showPage(1);
      }

      no Select, colocar o evento onChange para chamar uma function passando o valor selecionado no option

      flw

      • Cesar setembro 14, 2011 às 4:48 pm

        Ola Rafael, eu tentei cara mas não consegui implementar isso, não funciona os links e nem a tabela não esconde as linhas mais. Da uma olhada nesse código:
        //Dentro da function do JQuery

        $(‘#qtd’).change(function(){
        var max = $(‘#qtd’).val();
        var tbl = ‘tabelas’;
        setPages(tbl,max);
        });
        //Fora da fucntion do JQuery
        function setPages(tbl, max)
        {
        //alert pasra checar se os valores estao vindo
        alert(tbl+’ – ‘+max);
        var pager = new Pager(tbl, max);
        pager.init();
        pager.showPageNav(‘pager’, ‘pageNav’);
        pager.showPage(1);
        }

        Se puder me esclarecer agradeço pela ajuda.
        Flw

      • Rafael Clares setembro 14, 2011 às 6:37 pm

        Ah então, mandei no seu email o começo aê…. vê o que vc consegue… falta pouco, essa semana ta ruim de tempo para mim…
        ah nao pergunte por email blz? eu não respondo dúvidas por email…abs e até mais

  10. Ismael outubro 6, 2011 às 9:30 pm

    eu queria fazer um galeria de imagens porem são mais ou menos umas 200 consigo fazer paginação e light box ao mesmo tempo!?

    • Rafael Clares outubro 7, 2011 às 2:43 am

      Ismal, consegue sim, leia os 2 posts do blog, sobre paginação e lightbox que você consegue.
      Quaisquer dúvidas comente cada uma no post correto. abs

  11. carlosdanieldrury janeiro 4, 2012 às 5:10 pm

    Cara, muito bacana esse script de paginação, muito simples até. Posso também colocá-lo no meu blog? abraços cara

    • Rafael Clares janeiro 5, 2012 às 2:11 am

      Carlos, valeu! Pode colocar sim! Abs

  12. Paginação de Texto de forma simples usando java-script e css « Drury janeiro 7, 2012 às 1:07 am

    […] retirado de https://clares.wordpress.com/2010/05/16/paginacao-javascript/#comment-2220 blog do Rafael Clares Valeu […]

  13. carlosdanieldrury janeiro 7, 2012 às 1:10 am

    Vlw cara, depois confere la
    http://carlosdanieldrury.wordpress.com/
    abração

    • Rafael Clares janeiro 9, 2012 às 1:13 pm

      Ae Carlão, vi lá, valeu man! abraços

  14. Anderson janeiro 9, 2012 às 12:59 pm

    Rafael,
    Parabéns pelo script ele é muito eficiente, me ajudou muito, porém, estou com um pequeno problema, eu preciso exibir uma quantidade muito grande de registros e o script cria inúmeros links, tem alguma forma de limitar os links e exibir aos poucos..
    por exemplo:
    <>

    ao clicar no 5º link oculta o 1º e exibe o 6º…

    obrigado!

    • Rafael Clares janeiro 9, 2012 às 1:12 pm

      Poxa cara, pior que esse script não é capaz de fazer isso, seria uma boa, quem sabe uma próxima versão. Obrigado pelo comentário

      • Anderson janeiro 9, 2012 às 3:48 pm

        Ta certo, mesmo assim valeu pela ajuda,
        vou tentar algo aqui em mente, se eu conseguir modificar este script para adequá-lo as minhas necessidades eu posto aqui para sugestões e/ou melhorias..

        abraços!

  15. merlon5 janeiro 16, 2012 às 4:54 pm

    Pô vlw!!!!Quebrou meu galho!!!!

    Peguei sua tabela paginada e inclui resultados dos registros Mysql nela!!!!Fique com Deus!!!

  16. Nara fevereiro 29, 2012 às 7:07 pm

    AAAH :D
    Muito obrigada :)

  17. Márcio Leandro março 12, 2012 às 3:32 pm

    Ótima dica, estava mesmo a procura.
    Mas tenho uma dúvida…
    Acesse: http://www.cidadequente.com.br (Necessita cadastro) depois clique me VER TODOS (No comentário) e repare que ao paginar o primeiro registro nunca some, rs.
    Ficou assim:

    var pager = new Pager(‘tb1’, 1);
    pager.init();
    pager.showPageNav(‘pager’, ‘pageNav’);
    pager.showPage(1);

    No que estou errando.
    Muito obrigado!!

    • Rafael Clares março 12, 2012 às 3:39 pm

      Cara, acredito que sua tabela falte algo, por exemplo um

      Sua paginação é de apenas 1 linha por página, isso que você quer?

      Enfim, tente usando um thead na tabela para ver o que acontece!

      <table border="1" id="tb1">

      <thead>

      <tr>

      <th>&nbsp;</th>

      <th>&nbsp;</th>

      </tr>

      </thead>

      <tbody>

      <tr>

      <td>January</td>

      <td>$100</td>

      </tr>

      <tr>

      <td>February</td>

      <td>$80</td>

      </tr>

      </tbody>

      </table>

  18. Márcio Leandro março 12, 2012 às 7:05 pm

    Rafael, obrigado por responder.
    O problema está na forma que estou usando para chamar a página pelo ajax, atualio apenas a div.
    Minha dúvida agora é se tem como limitar a quantidade de números gerados pela paginação, exemplo.
    Se meus registros gerarem 100 páginas, isso irá passar do limite padrão do site, tentei colocar o resultado da paginação em uma tabela e travar o width, mas não funcionou.
    Obrigado mais uma vez.
    Abraço!

    • Rafael Clares março 15, 2012 às 2:58 pm

      Marcio, cara não vou escrever o script, vou tentar te dar uma direção, ok?

      Você precisa setar o JS somente após saber a quantidade de registros
      Supondo que você só quer 20 páginas no máximo

      $paginas = mysql_num_rows($query) / 20;

      daí tente passar para o JS a quantidade por página, assim você terá sempre 20 páginas para não estourar;
      var pager = new Pager(‘tb1‘, );

      é uma opção!

  19. Márcio Leandro março 13, 2012 às 1:25 pm

    Perfeito, o problema não estava na forma de chamar a página, apenas não tinha percebido que a primeira é fixa…
    Mas ainda continuo na dúvida de como limitar a quantidade de números gerados pela paginação.
    Obrigado!

  20. Anderson março 23, 2012 às 7:50 pm

    Boa Tarde Rafael, tudo bem?

    Este script que vc postou e realmente fantastico, poém estou com um poblema.
    A tabela que eu faço a paginação, é o resultado de uma busca mediante informações de um formulario, até ai maravilha, porém nesta tabela de resultado contém links e se eu clicar nestes links e ir para uma outra pagina, qd retonar eu perco os dados da consulta e a paginação volta ao estado zero como se eu estivesse acabado de entrar na pagina….
    OBS: assim que entro na pagina é apresentada uma tabela com todos os dados do banco de dados paginados.

    Fico no aguado de uma ajuda!!!!!!!

    Obrigado.

    • Rafael Clares março 27, 2012 às 2:16 am

      Anderson, nesses casos essa paginação em JS não é recomendada;
      O ideal é você procurar um script de paginação mesmo (php ou na linguagem que está utilizando).
      Paginação é algo simples e esse script é para coisas com volume pequeno de informações;

  21. Aquiles Maior agosto 6, 2012 às 10:34 am

    Olá ótimo artigo parabéns. Veja se pode me ajudar, estou tentando fazer está paginação funcionar dentro de uma div “conteudo” (aquela em que o usuario clica no menu e o link do menu abre dentro de uma div) meu menu chama a pagina certinho porém a paginação nao funciona. O que poderia ser feito neste caso?

    • Rafael Clares agosto 13, 2012 às 2:09 pm

      Sabe o javascript que é usado para criar a paginação?

      var pager = new Pager(‘tb1’, 2);
      pager.init();
      pager.showPageNav(‘pager’, ‘pageNav’);
      pager.showPage(1);

      Então, depois que abrir a página dentro da DIV, tente executar novamente o script de paginação.
      Você pode colocar no rodapé/ evento onload de cada página chamada.
      Pode funcionar.

  22. sergio kaminsky agosto 22, 2012 às 3:12 pm

    Amigo estou usando codigo e esta muito bom e agora só preciso saber como faço para aperte de paginação for do tamanho do layout da tabela e toda vez que ultrapassar a tabela a paginação se divide em 2 linhas, não quebrando o layout. Obrigado dez já.

    • sergio kaminsky agosto 22, 2012 às 7:23 pm

      Alguem pode me ajudar por favor?????

      • Rafael Clares agosto 22, 2012 às 7:43 pm

        Sergio, você precisa ter paciência, não temos uma equipe respondendo os posts em tempo real.
        Somente eu respondo os posts e para isso preciso de tempo já que também trabalho.

    • Rafael Clares agosto 22, 2012 às 7:47 pm

      Tente adicionar o seguinte no CSS:
      #pageNav { width: 400px !important; max-width:400px !important; }

      Veja se funciona e se funcionar vá ajustando a largura com o tamanho desejado;
      Obs: esse problema é no CSS, espera-se que o programador faça modificações no CSS ao baixar scripts básicos;

  23. William agosto 23, 2012 às 2:30 pm

    Amigo, muito bom script bem funcional e simples, mas estou enfrentando um problema meio estranho.

    Quando a consulta retorna um número de linhas menor do que o estipulado para se apresentar por página são apresentadas 3 páginas e não apenas 1 como deveria ser, mas se o número de linhas retornado pelo banco é maior do q o estipulado para apresentação a quantidade de página é correta.

    Até pensei que fosse algo com o Math.ceil, cheguei alterar algumas coisas no paging.js sem efeito então retornei ao original.

    Você tem algum palpite para eu tentar ajustar isso ?

    • Rafael Clares agosto 23, 2012 às 2:39 pm

      Tá online o site, dá para ver?
      Qualquer coisa manda o código no pastebin e me passa o link;
      Mas no geral o que você vai precisar fazer é:
      – saber o número de linhas que retornam da consulta e só depois setar o new Pager(‘tb1’, 2) de alguma forma dinâmica;
      Já que a tabela é resultado de uma consulta realmente fica difícil adivinhar o quantas linhas setar no js;

      Se junto da consulta você conseguir recuperar a quantidade de linhas você pode fazer algo como:

      var pager = new Pager(‘tb1’, <?=$qtdeRows?>);
      pager.init();
      pager.showPageNav(‘pager’, ‘pageNav’);
      pager.showPage(1);

      • William agosto 23, 2012 às 5:22 pm

        Rafael,
        Não, na verdade é um site de intranet.

        A quantidade de linhas retornadas na consulta é variável pois a consulta é dinâmica (utilizo 1 form efetuando o post na página com os filtros de pesquisa), e em todos os testes que fiz estavam batendo com as linhas apresentadas na tela.

        O mais legal é que este problema não ocorre quando o máximo de linhas por página é setado com algum número maior que 10.

        No meu caso já resolve, mas estou testando aqui para ver se encontro o porque disso. Não sei se interfere (creio que não) mas utilizo a conexão com o MS SQLServer e a consulta realizada nesta página é via procedure.

      • Rafael Clares setembro 5, 2012 às 5:19 pm

        Acho que não tem muito a ver com o fato de ser MSSQL; Pode ser algum problema relacionado ao momento de instanciar o objeto js de paginação. Pior que nem consigo simular.
        Depois coloca no pastebin o trecho do código ok;

  24. mario junior setembro 2, 2012 às 3:11 pm

    Script muito bom, vlw mesmo.

  25. Tiko outubro 23, 2012 às 4:02 pm

    Há muito tempo eu procuro um código simples assim. Adaptei no meu sistema e ficou ótimo. Obrigado.

Os comentários estão desativados.