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:



	
		
		Paginador com AJAX
		
		
		
	

	
		

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:

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

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:

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

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:

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
     	}
    })
}

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.

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

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

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){
				$('#paginador tr').append(''+i+'')
			}else{
				$('#paginador tr').append(''+i+'')
				}
		}
		if(pagina!=qtdpaginas){
			$('#paginador tr').append('Próxima Página')
		}
	}
}

getitens.php

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

	//conexão com banco de dados
	mysql_connect('localhost', 'root', '') or die('Erro ao conectar com o servidor');
	mysql_select_db('paginador') or die ('Erro ao selecionar o banco de dados');
	//pegando tipo de consulta: listagem ou contador
   	$tipo=$_GET['tipo'];
	//se o tipo for listagem
   	if($tipo=='listagem'){ 
   		$pag=$_GET['pag']; 
   		$maximo=$_GET['maximo'];
		$inicio = ($pag * $maximo) - $maximo; //Variável para LIMIT da sql
		?>
		
			ID
			Nome
			E-mail
		
		
			
				
				
				
			
			

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

Jayr Alencar

Doutorando em Ciências da Computação no Centro de Informática da Universidade Federal do Pernambuco (CIn - UFPE); Mestre pela mesma instituição; Formado em Análise e Desenvolvimento de Sistemas; Católico; Fã de O Senhor do Anéis.

Você pode gostar...

18 Resultados

  1. gisele disse:

    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…

    • Jayr Alencar disse:

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

      success: function(result){
                      links = 5;
                      pag = paginaGLOBAL;
                      var qtdpaginas=Math.ceil(result/10); 
                      if(result<=10){ //Verificando se há mais de uma página
                          $('#paginacaoTCC').html('
    • 1
    • ') }else{ $('#paginacaoTCC').append('
    • Primeira Página
    • ') for(var i = pag - links ; i <= pag - 1 ; i++){ if(i>0){ $('#paginacaoTCC').append('
    • '+i+'
    • ') } } $('#paginacaoTCC').append('
    • '+pag+'
    • '); for(var i = pag + 1 ; i <= pag + links ; i++){ if(i'+i+'
    • ') } } $('#paginacaoTCC').append('
    • Última Página
    • ') } }
  • thiago disse:

    ô 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

  • Nilton disse:

    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…

    • Jayr Alencar disse:

      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?

      • Nilton disse:

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

      • Nilton disse:

        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 ‘)
        }
        }
        }

      • Nilton disse:

        O script que “colei” aí saiu tudo truncado….
        Baixe os arquivos aqui:
        BAIXAR OS ARQUIVOS

  • Andre Luiz disse:

    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

  • jesse disse:

    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!

  • Marcos Dias disse:

    De onde vem esse “function(retorno){ $(‘#conteudo’).html(retorno);”, estou tentando implementa, “mas não funciona o success” .

  • Deixe um comentário para jesse Cancelar resposta

    O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *