Olá, pessoal! Hoje falaremos sobre paginação. Sobre esse assunto existe muito material na Internet, porém a minha intenção é mostrar uma abordagem nova e que muitas empresas estão usando: a “rolagem infinita”. É uma técnica bem simples de fazer. Veja o seguinte trecho de código:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<title>Exemplo 1 - Rolagem Infinita</title>
<script>
$(document).ready(function(){
$("#proxima-pagina").click(function(e){
$.post('ajax-exemplo.php', {}, function(data){
$("#local").append(data);
});
e.preventDefault();
});
});
</script>
</head>
<body>
<ul id="local">
<?php
$linhas = array();
$linhas[] = 'Link '.time();
sleep(1);
$linhas[] = 'Link '.time();
sleep(1);
$linhas[] = 'Link '.time();
foreach($linhas as $linha){
echo '<li>'.$linha.'</li>';
}
?>
</ul>
<p><a href="javascript:void(0)" id="proxima-pagina">Próxima Página</a></p>
</body>
</html>
É algo autoexplicativo. Eu não fiz acesso a banco de dados para não torná-lo complexo.
O código do arquivo ajax-exemplo.php é muito simples, vejam:
<li>Link <?php echo time(); sleep(1); ?></li>
<li>Link <?php echo time(); sleep(1); ?></li>
<li>Link <?php echo time(); sleep(1); ?></li>
Fazendo dessa forma, eu já tenho a paginação; porém esse código, ao meu ver, tem um grande problema. Caso ocorra algum erro de JavaScript na página que impeça esse código de ser executado, o usuário não terá a paginação. E vocês sabem: usuário insatisfeito não volta ao seu site.
Então, como podemos resolver esse problema? Vamos ao código do exemplo 02!
<?php
$pagina=1;
if (isset($_GET['pagina']) ){
$pagina = $_GET['pagina'];
}
$pagina++;
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<title>Exemplo 2 - Rolagem Infinita</title>
<script>
//DEFINITION++;
$(document).ready(function(){
$("#proxima-pagina").click(function(e){
var el = $(this);
el.html('carregando');
var href = el.attr("href").split('=');
var link = href[1];
var proxima_pagina = (parseInt(link)+1);
$.post('ajax-exemplo.php', {pagina: link}, function(data){
$("#local").append(data);
el.attr( 'href', 'exemplo2.php?pagina='+(proxima_pagina) );
el.html( 'Página ' + proxima_pagina );
});
e.preventDefault();
});
});
</script>
</head>
<body>
<ul id="local">
<?php
$linhas = array();
$linhas[] = 'Link '.time();
sleep(1);
$linhas[] = 'Link '.time();
sleep(1);
$linhas[] = 'Link '.time();
foreach($linhas as $linha){
echo '<li>'.$linha.'</li>';
}
?>
</ul>
<p><a href="exemplo2.php?pagina=<?php echo $pagina; ?>" id="proxima-pagina">Página <?php echo $pagina; ?></a></p>
</body>
</html>
Nesse código, eu faço um Parser da URL, que no meu caso é muito simples: eu simplesmente faço o split do link para pegar qual seria a próxima página. É importante que a próxima página exista e faça de fato a paginação.
Remova o comentário DEFINITION++ que verá o funcionamento do código JavaScript para paginação. Agora já temos uma paginação funcionando e sem o problema de erro, caso o JavaScript pare de funcionar.
Agora comentarei um caso real que aconteceu recentemente na movin’ on – empresa em que trabalho -, e foi exatamente isso que motivou a fazer este artigo.
Conseguimos fechar uma parceria com o site Mídia Publicitária para renovar a interface do site deles e no layout sugerimos que a paginação fosse feita dessa forma, com rolagem infinita. Porém, o site deles é no WordPress. Como poderíamos fazer essa paginação? Não poderíamos fazer como no exemplo acima, pois não compensaria (no nosso ponto de vista) fazer o get_posts por ajax e exibir o conteúdo.
Dessa forma, fizemos o seguinte:
<script>
jQuery(function(){
jQuery(".mais-postagens a").click(function(e){
var link = jQuery(this).attr("href");
jQuery(".mais-postagens").html("<a><img src='http://midiapublicitaria.com/wp-content/themes/mp-movinon/images/ajax-loader.gif' alt='carregando...' />carregando...</a>");
jQuery("#hack-mv").load(link, function(data){
var c = jQuery("#hack-mv").find("#content");
c.find("header.page-header").remove();
c.find(".popular").remove();
jQuery("#hack-mv").remove();
jQuery(".mais-postagens").remove();
jQuery("#mais-post").html(c.html());
jQuery("#mais-post").attr("id", 't-'+new Date().getTime() );
});
e.preventDefault();
});
});
</script>
No código acima, eu pego o conteúdo da URL e coloco dentro de um iframe. Acesso-o e capturo somente a DIV, onde está o conteúdo que está sendo paginado. Removo as partes que não interessam para a paginação e adiciono o HTML dentro de uma nova DIV. Pronto, paginação realizada!
Uma dica extra: Para quem não conhece o WordPress, deveria pesquisar sobre, pois ele traz muita produtividade ao desenvolvimento de sites.
Espero que tenham gostado e caso tenham alguma dúvida é só perguntar nos comentários.
Um detalhe: os códigos aqui tiveram o objetivo de serem explicativos e não mostrar performance ou a melhor forma de ser feito.
Até a próxima!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?