Paginação assíncrona com jQuery, Ajax e MySQL

Olá, ontem postei um tutorial sobre como fazer paginação de itens com php e conexão MySQL. Um método fácil e eficiente, onde o único problema é o de ter que atualizar a página para que haja a mudança de itens. Pensando nessa desvantagem resolvi fazer a paginação de forma assíncrona, ou seja, sem a necessidade de atualização da página para que haja a mudança de itens. Para isso vamos usar as linguagens PHP, JavaScript e HTML, a banco de dados MySQL e a biblioteca jQuery.

Veja o DEMO | Baixe os arquivos

1 – Primeiro é necessário baixar a biblioteca jQuery, caso você não a tenha, clique aqui;

2 – Quanto ao banco de dados, faremos uso do mesmo mostrado no post anterior: Paginação de itens com php e conexão MySQL
;
3 – Crie uma pasta chamada paginadorAJAX, dentro do diretório C:\wamp\www;

4 – Cole o arquivo jquery.js para esta pasta, e crie mais três arquivos nela: index.php, getitens.php e paginador.js;

index.php

5 – No arquivo index.php nós faremos a nossa página HTML, que deve estar com seguinte código:

getitens.js

6 – Agora, no arquivo paginador.js vem a parte mais complicada, que é a que faz o paginador funcionar. Vamos começar criando as variáveis que determinarão a página de início e a quantidade de itens por página:

7 – Depois usaremos o método ready do elemento document para chamar a função que lista os itens que estão no banco de dados:

8- Agora vamos a construção da função getitens(), que faz uso de ajax para consultar o arquivo getitens.php que será mostrado mais à frente:

9 – Depois vamos à função contador(), que verifica a quantidade de itens no banco de dados e chama a função que constrói o paginador.

10 – Para encerrarmos o arquivo getiten.js faremos a função que constrói o paginador, veja:

getitens.php

11 – Agora vamos ao arquivo getitens.php, que deve estar da seguinte forma:

Pronto, agora você pode testar seu paginador acessando o localhost com o Wamp ligado.

Sobre o autor:

Graduado em Análise e Desenvolvimento de Sistemas - FLS; Desenvolvedor Full-stack na UniLeão; Revisor de conteúdo do site Clube dos Geeks, católico, gosto de ler e escrever.

Postagens relacionadas:

17 respostas

  1. gisele

    super facil a paginação ja estou usando, pode me dar um help? é que minha table trouxe 100 paginas e asism fica

    1-2-3 ate o 100 queria deixar tipo anterior 1-2-3 proxima…

    Responder
    • Jayr Alencar

      Na função paginador faça mais ou menos assim:

      Responder
  2. thiago

    ô jovem seu codigo era exatamente o que eu ia precisar, só que aqui não funciona, adapitei pra minha necessidade, e so o que mudei realmente foi o php o que causou no ajax uma especie de looping de requisição infinita ve se pode me ajudar.

    desde já agradeço

    Responder
  3. Nilton

    Olá Jayr,
    Também estava precisando reduzir a paginação para poucos links …. anterior… 7|8|…próxima…..
    Mas como integrar seu “success: function(result){” no script anterior ?
    Desculpe, mas a gente é bem tapadinho no assunto…

    Responder
    • Jayr Alencar

      Opa Nilton, em relação à redução da quantidade de páginas, irei fazer um post a respeito assim que puder.
      Quanto a integrar o success no script anterior eu não entendi sua pergunta. Integrar como?

      Responder
      • Nilton

        É isso que estamos querendo: paginação assíncrona com redução dos links…
        Estamos aguardando. Obrigado.

      • Nilton

        Olá…
        Fiz uma adaptação no seu javascript e a paginação ficou legal…
        Dê uma olhada e se estiver de acordo, pode publicar para outros interessados, como o thiago…

        var numitens=3; //quantidade de itens a ser mostrado por página
        var pagina=1; //página inicial – DEIXE SEMPRE 1

        $(document).ready(function(){
        getitens(pagina,numitens); //Chamando função que lista os itens
        })

        function getitens(pag, maximo){
        pagina=pag;
        $.ajax({
        type: ‘GET’,
        data: ‘tipo=listagem&pag=’+pag +’&maximo=’+maximo,
        url:’getitens.php’,
        success: function(retorno){
        $(‘#conteudo’).html(retorno);
        contador() //Chamando função que conta os itens e chama o paginador
        }
        })
        }

        function contador(){
        $.ajax({
        type: ‘GET’,
        data: ‘tipo=contador’,
        url:’getitens.php’,
        success: function(retorno_pg){
        paginador(retorno_pg)
        }
        })
        }

        function paginador(cont){
        if(cont<=numitens){ //Verificando se há mais de uma página
        $('#paginador').html('Apenas uma Página’)
        }else{
        $(‘#paginador’).html(”);
        if(pagina!=1){
        $(‘#paginador tr’).append(‘Página Anterior‘)
        }
        var qtdpaginas=Math.ceil(cont/numitens); //arredondando divisão fracionada para cima
        for(var i=1;i<=qtdpaginas;i++){
        if(pagina==i){

        for(var i=pagina-2; i0 && i <= qtdpaginas )
        $('#paginador tr').append('‘+i+’‘)
        }
        }
        }

        if(pagina!=qtdpaginas){
        $(‘#paginador tr’).append(‘ Próxima ‘)
        }
        }
        }

  4. Andre Luiz

    Ola, Boa noite!!

    Gostei muito do seu código… Até adaptei para as minhas necessidades… só tem um problema..

    Gostaria de mostrar a lista, conforme o que seleciono no select porém quando vou mandar um dado para fazer o “Where” na hora da seleção, ele da algum conflito com a requisição do tipo :/

    Tem alguma dica de como acrescentar esse dado?

    vlwww

    Responder
  5. jesse

    Bom dia amigo, primeiramente obrigado por este artigo, muito bom…
    gostaria de uma ajuda sua, é por que não consigo substituir o mysql_connect por PDO, poderia me auxiliar? sou novo com PHP…
    desde já agradeço muito!
    acabei enviando pra outro artigo que também fala em paginação, mas era nesse aqui…

    Obrigado amigo!

    Responder

Deixe uma resposta

Seu e-mail não será publicado.