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.
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…
Na função paginador faça mais ou menos assim:
ô 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
Como tá o php?
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…
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?
É isso que estamos querendo: paginação assíncrona com redução dos links…
Estamos aguardando. Obrigado.
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 ‘)
}
}
}
O script que “colei” aí saiu tudo truncado….
Baixe os arquivos aqui:
BAIXAR OS ARQUIVOS
Nilton pode me enviar esses arquivos seus com redução dos links?
Em tempo:
Veja o funcionamento aqui:
http://www.dicionariodafe.com/ajax/ajax.php#
Valeu Nilton, ficou bacana. Quando tiver mais dicas ou dúvidas é só avisar.
poderiam me ajudar ! como faço para por a paginação ativada no numero clicado (1) 2 (3) ingual do post para esse do nilton ? grato
Ola Nilton os arquivos não estão mais disponiveis?
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
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!
Cara, as estruturas dos dois são bem diferentes, sugiro que tente fazer do zero com PDO ou criar funções que você possa só substituir as do mysql.
De onde vem esse “function(retorno){ $(‘#conteudo’).html(retorno);”, estou tentando implementa, “mas não funciona o success” .