Todo website com uma quantidade média a grande de conteúdo precisa paginar o conteúdo. Desta maneira ele fica organizado e possibilita ter uma idéia sobre o conteúdo disponível. O exemplo mais comum são os blogs, mas esta idéia também se aplica ao resultado das buscas e outros websites.
Neste tutorial vou mostrar como criar uma paginação simples, com números seqüenciais, e a avançada onde é possível ter acesso à primeira e última página além do intervalo entre a página atual, próximas e anteriores como você pode conferir na imagem abaixo:
Antes de partirmos para a programação vamos analisar pontos importantes que devem ser observados na criação da paginação.
O Design Da Paginação
Um aspecto muitas vezes negligenciado no design das páginas é a paginação. As vezes ficam aqueles números pequenos mal espaçados difíceis de clicar. Uma experiência terrível para o usuário.
A primeira medida então é oferecer uma área de clicagem generosa para evitar erros e clicar no link do lado. Um bom espaçamento entre os números já resolve o problema, nem precisa aumentar o tamanho da fonte.
E por ser um link, a aparência dele deve mudar quando o mouse passar sobre os números. Estamos na web, interatividade, resposta imediata das ações. Adicionar link para a próxima página e a anterior facilita muito a vida do leitor.
Informe com estilização diferenciada em qual página o usuário encontra-se. Sempre de maneira intuitiva na linha “não me faça pensar”.
Se você gosta de sair do comum e quer criar uma paginação inovadora, cuide com a empolgação e tenha em mente como aspecto principal a usabilidade.
Os Textos
Os textos são inseridos a partir de uma tabela no banco de dados. Neste tutorial utilizei uma tabela chamada ‘artigos’ com os campos para id, titulo e texto e é feita uma conexão com o banco de dados.
<?php
$db = "banco_dados";
@mysql_connect("localhost", "usuario", "senha") or trigger_error(mysql_error(),E_USER_ERROR);
mysql_select_db($db);
?>
Como A Paginação Funciona
Com as sentenças SQL você pode delimitar quantos registros são retornados pela busca na tabela. A cláusula LIMIT faz este papel. Para selecionar os registros do 5 ao 10 de uma tabela escreve-se:
SELECT * FROM tabela LIMIT 5,5
O primeiro número indica a partir de qual deve ser feita a seleção, e o último quantos registros entram na conta. Alterando estes valores que conseguiremos apresentar na tela os registros respectivos de cada pagina.
Variáveis Iniciais
A principio precisamos saber qual página pretende-se visualizar e quantos registros serão mostrados por página.
<?php
$pag = ($_GET['pag']);
$pag = filter_var($pag, FILTER_VALIDATE_INT);
$inicio = 0;
$limite = 1;
if ($pag!='')
{
$inicio = ($pag - 1) * $limite;
}
Na primeira linha a variável recebe o número da página e na segunda é feita uma verificação para validar o número. Lembrando que o filter_var somente esta disponível a partir do PHP 5.2.
Os valores padrão para a seleção dos registros são 0 e 1. Por isso as variáveis com os respectivos nomes. Se o número da página não for passado estes é que serão os adotados. Mas se o número da página for diferente de nada, a variável ‘inicio’ vai receber o resultado da subtração deste número por 1 vezes o limite de registros a serem mostrados por página. Qual o propósito do cálculo?
Pense que para mostrar o primeiro registro, na sentença SQL a seleção deve ser feita partindo do número 0 e selecionando um registro:
SELECT * FROM tabela LIMIT 0, 1
Então para selecionar o segundo registro parte do primeiro e seleciona mais um (1+1=2). Se você quiser mostrar dois textos por página, vai bastar alterar o valor da variável ‘limite’ para 2.
Fazendo A Busca E Mostrando O Resultado
Vejamos a aplicação das variáveis setadas. Supondo que é a primeira vez que a página é acessada então são utilizados os valores padrão das variáveis ‘inicio’(0) e ‘limite’(1).
$busca = mysql_query("SELECT * FROM artigos LIMIT $inicio, $limite");
if (mysql_num_rows($busca)>0)
{
while ($texto = mysql_fetch_array($busca))
{
extract($texto);
echo '<h2>'.$titulo.'</h2>';
echo '<p>'. nl2br($artigo).'</p>';
}
}
São selecionadas todas as colunas da tabela artigos limitadas entre o registro 0 e o 1. Isso quer dizer, o primeiro registro. Se a busca retornar algum registro e feito um laço para que, enquanto a variável ‘texto’ receber o retorno da busca os dados são extraídos e mostrados na tela.
Os Números Da Paginação
Vamos configurar os valores para os botões de próximo, anterior e adjacentes da atual página.
$busca_total = mysql_query("SELECT COUNT(*) as total FROM artigos");
$total = mysql_fetch_array($busca_total);
$total = $total['total'];
$prox = $pag + 1;
$ant = $pag - 1;
$ultima_pag = ceil($total / $limite);
$penultima = $ultima_pag - 1;
$adjacentes = 2;
Nas primeiras três linhas é feita uma busca que retorna o número de registros da tabela, os dados são transformados em matriz e o número total é atribuído para a variável ‘total’.
Os links para a próxima página e a anterior terão como valores o número atual da página acrescido ou decrescido em 1. O valor para o link da última página é o resultado da divisão do total de registros pelo número deles que é mostrado na tela. Com isso tendo 10 registros no total e sendo mostrados 2 por página, o valor da última página será 5. Pegando este valor é subtraído 1 para o valor da penúltima página. A variável ‘adjacentes’ configura quantos números ficarão disponíveis em cada lado da página atual na paginação.
Ficará mais claro o porque destas variáveis conforme formos aplicando no código abaixo.
Paginação Simples
Se o número de registos retornado não for suficiente nem para 5 páginas não precisamos adicionar os números adjacentes nem os pontos para indicar que existem páginas além.
if ($pag>1)
{
$paginacao = '<a href="index.php?pag='.$ant.'">anterior</a>';
}
if ($ultima_pag <= 5)
{
for ($i=1; $i< $ultima_pag+1; $i++)
{
if ($i == $pag)
{
$paginacao .= '<a class="atual" href="index.php?pag='.$i.'">'.$i.'</a>';
} else {
$paginacao .= '<a href="index.php?pag='.$i.'">'.$i.'</a>';
}
}
}
Se o número da página atual é maior do que um, então cabe o link para ver a página anterior. Já estamos aplicando a variável configurada anteriormente no código.
A próxima verificação poderia ser engatada como else da que virá abaixo, mas para deixar o código mais organizado vamos deixá-la sozinha.
Se a última página, que é o resultado da divisão do total de registros pelo número deles que é mostrado em cada página, for menor do que cinco, é feito um laço. Para ‘i’ que recebe um, enquanto ele for menor do que seis (última página + 1), o laço se repete. Nele os links são mostrados com os valores para os respectivos números de página. A verificação é para saber se o ponteiro do laço esta com o mesmo valor que a página atual, que requer uma estilização diferente para informar o usuário onde ele esta.
Observe que os valores estão sendo atribuídos a variável ‘paginacao’, ela ainda vai receber muitos dados no decorrer do código.
Os Intervalos Na Paginação
Se o número de páginas for maior do que cinco, já é possível criar os intervalos.
if ($ultima_pag > 5)
{
if ($pag < 1 + (2 * $adjacentes))
{
for ($i=1; $i< 2 + (2 * $adjacentes); $i++)
{
if ($i == $pag)
{
$paginacao .= '<a class="atual" href="index.php?pag='.$i.'">'.$i.'</a>';
} else {
$paginacao .= '<a href="index.php?pag='.$i.'">'.$i.'</a>';
}
}
$paginacao .= '...';
$paginacao .= '<a href="index.php?pag='.$penultima.'">'.$penultima.'</a>';
$paginacao .= '<a href="index.php?pag='.$ultima_pag.'">'.$ultima_pag.'</a>';
}
elseif($pag > (2 * $adjacentes) && $pag < $ultima_pag - 3)
{
$paginacao .= '<a href="index.php?pag=1">1</a>';
$paginacao .= '<a href="index.php?pag=1">2</a> ... ';
for ($i = $pag-$adjacentes; $i<= $pag + $adjacentes; $i++)
{
if ($i == $pag)
{
$paginacao .= '<a class="atual" href="index.php?pag='.$i.'">'.$i.'</a>';
} else {
$paginacao .= '<a href="index.php?pag='.$i.'">'.$i.'</a>';
}
}
$paginacao .= '...';
$paginacao .= '<a href="index.php?pag='.$penultima.'">'.$penultima.'</a>';
$paginacao .= '<a href="index.php?pag='.$ultima_pag.'">'.$ultima_pag.'</a>';
}
else {
$paginacao .= '<a href="index.php?pag=1">1</a>';
$paginacao .= '<a href="index.php?pag=1">2</a> ... ';
for ($i = $ultima_pag - (4 + (2 * adjacentes)); $i <= $ultima_pag; $i++)
{
if ($i == $pag)
{
$paginacao .= '<a class="atual" href="index.php?pag='.$i.'">'.$i.'</a>';
} else {
$paginacao .= '<a href="index.php?pag='.$i.'">'.$i.'</a>';
}
}
}
}
Se a página atual for menor do que cinco (o adjacentes esta configurado com 2) é feito um laço. No for, enquanto a variável ‘i’ for menor do que seis os números são mostrados fazendo uma verificação para saber qual é a página atual que exige uma estilização diferente.
Gerados os números, à variável ‘paginacao’ ainda são somados os três pontos e a última e penúltima página.
Mas se a página atual for maior do que quatro e menor do que a última menos três, é uma página intermediária. Primeiro são anexadas a primeira e última páginas. Depois é feito um laço para definir as adjacentes.
A variável ‘adjacentes’ recebeu neste código o valor dois. Para enteder melhor este laço vamos supor que estamos na página seis. A variável ‘i’ vai receber quatro (atual – adjacentes), enquanto ela for menor do que oito (atual + adjacentes) os números links gerados com uma verificação para saber qual é a página atual. Por fim são anexadas a última e penúltima páginas.
O último else é para quando a página atual esta perto do final da numeração. São anexadas a primeira e última páginas além dos três pontos. A variável ‘i’ recebe o resultado da última página menos oito (4+2*2) enquanto não for menor ou igual a este número, os links são gerados.
Na Tela
Até esta altura do código, nenhuma paginação foi mostrada, apenas a variável ‘paginacao’ recebeu os links.
if ($prox <= $ultima_pag && $ultima_pag > 2)
{
$paginacao .= '<a href="index.php?pag='.$prox.'">próxima »</a>';
}
echo $paginacao;
echo '</div>';
A variável ainda recebe o link para a próxima página que é atribuído após uma verificação para saber se não estamos na última página nem na primeira.
Por fim com um echo toda a paginação é mostrada e é fechada a div que contém os links.
Download do código utilizado neste tutorial: Paginação Avançada Com PHP [4]
