Como construir uma paginação Ajax com JQuery e PHP

Escrito por ian low | Traduzido por aline kachel araujo
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como construir uma paginação Ajax com JQuery e PHP
Adicionar paginação a textos longos podem deixar o seu site mais amigável para o usuário (Phil Ashley/Lifesize/Getty Images)

Caso você precise exibir grandes quantidades de texto, tais como artigos ou histórias em seu site, você pode separá-lo em paginas através de uma funcionalidade de paginação escrita em JQuery, Ajax e PHP. Como a maioria das páginas de internet dinâmicas, este exemplo também envolve HTML e CSS. Este artigo presume que você tem um entendimento básico das linguagens envolvidas e disponibiliza links para exemplos que estão funcionando.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Servidor de internet com PHP

Lista completaMinimizar

Instruções

  1. 1

    Baixe o jquery-1.5.1.min.js (veja a seção de Recursos).

  2. 2

    Abra o Bloco de Notas e digite qualquer dado de testes no arquivo. Deve haver pelo menos 20 linhas. Salve o arquivo como "meuarquivoteste.txt" na sua área de trabalho. Feche o bloco de notas.

  3. 3

    Copie e cole o código abaixo em um arquivo em branco de Bloco de Notas. Salve o arquivo como "paginacao.php" na sua área de trabalho. Repare que este é um arquivo que chama a si mesmo. Ele testa se ele é chamado pelo Ajax. Nesse caso, ele exibe o conteúdo do "meuarquivoteste.txt" e fecha. Se não, ele exibe a seção HTML. Veja a seção de Recursos para um exemplo funcional.

    <?php $filename="meuarquivoteste.txt";

    $file=fopen($filename,"rb"); $data=fread($file,filesize($filename)); fclose($file);

    if((strtolower($_SERVER['HTTP_X_REQUESTED_WITH'])=='xmlhttprequest') && ($_GET['page']!="")){ $data='<pre style="border:solid; border-width:1px; word-wrap:break-word; font-size:80%;font-family:Times New Roman;">'.$data.''; echo $data; return; } ?> <html><head></head><body> <div id='text' ></div> <script type='text/javascript' src='jquery-1.5.1.min.js'></script> <script> $(document).ready(function(){ $('#text').load('paginacao.php?page=1'); }); </script> </body></html>

  4. 4

    Copie as seguintes linhas e as cole depois do "$filename="meuarquivoteste.txt";". Note que essas linhas testam caso o número de linhas por páginas, ou nome do arquivo, tenha sido especificado no endereço de internet. Caso contrário, ele assume um padrão de 10 linhas por página e o "meuarquivoteste.txt".

    $linesPerPage=$_GET["lpp"]; if($linesPerPage=="") $linesPerPage=10; $filename=$_GET['file']; if($filename=="") $filename="meuarquivoteste.txt";

  5. 5

    Copie as seguintes linhas e as cole depois do "fclose($file);". Note que o conteúdo de cada linha é lido em um array chamado "$lines", a partir do qual o número total de páginas é calculado. Depois, ele extrai apenas as linhas que pertencem à página especificada na variável "$data". A página é especificada no parâmetro "page", no endereço de internet solicitado. Veja a seção de Recursos para um exemplo funcional.

    $lines=explode("\n",$data); $numberOfPages=count($lines)/$linesPerPage; if($numberOfPages>floor($numberOfPages)) $numberOfPages=floor($numberOfPages)+1;

    $fromPage=$_GET['page']; $fromLine=($fromPage - 1) * $linesPerPage; $toLine=$fromPage * $linesPerPage; $data=""; for ($i=$fromLine; $i<$toLine; $i++){ $data=$data.$lines[$i]; }

  6. 6

    Copie as seguintes linhas e as cole depois do "<div id='text' ></div>". Note que isso cria uma lista de números de página para a seleção do usuário.

    <ul id='pagination'> <?php for ($i=1; $i<=$numberOfPages; $i++){ echo "<li id='".$i."'>".$i."</li> "; } ?> </ul>

  7. 7

    Copie as seguintes linhas e as cole depois do "$(document).ready(function()){". Note que o código PHP atribui variáveis PHP às variáveis JavaScript.

    <?php echo "var filename='".$filename."';\n"; echo "var linesperpage='".$linesPerPage."';\n"; ?>

  8. 8

    Copie as seguintes linhas e as cole depois do "$('#text').load('pagination.php?page=1');". Note que a função JavaScript "dispLoad()" toma o número da página como parâmetro e usa a função JQuery Ajax "load()" para carregar o arquivo na div do "text". O nome do arquivo, número da página e linhas por páginas são especificados como parâmetros no endereço de internet requisitado.

    function dispLoad(pageNumber){ $('#text').load('pagination.php?file='+filename+'&page='+pageNumber+'&lpp='+linesperpage); }

    $('#pagination li').click(function(){ dispLoad(this.id); });

  9. 9

    Copie e cole a seção de estilo a seguir dentro da seção head do código HTML. Note que isso vai mudar a forma de exibição da seleção dos números de páginas pelo usuário, de forma que elas não sejam mais exibidas como marcadores.

    <style> li{list-style:none; float:left; border:solid 1px #eeeeee; color:#0000aa; cursor:default; margin-right:0px;} </style>

  10. 10

    Substitua a linha "$('#text').load('pagination.php?page=1');" pela linha abaixo

    dispLoad(1);

  11. 11

    Copie e cole as seguintes linhas depois do "function dispLoad(pageNumber){". Note que a primeira linha faz com que todos os números de pagina fiquem cinza e a segunda linha seleciona apenas o número de página. Veja a seção de Recursos para um exemplo funcional.

    $('#paginacao li').css({'color':'#aaaaaa'}).css({'border':'solid 1px #eeeeee'}); $('#'+pageNumber).css({'color':'#000000'}).css({'border':'solid 1px #aaaaaa'});

  12. 12

    Salve o paginacao.php e suba o arquivo no diretório raiz do seu servidor de internet, junto com o meuarquivoteste.txt e o jquery-1.5.1.min.js. Aponte seu servidor para o "paginacao.php" em seu servidor de internet e teste para ver se funciona.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível