Paginator: Paginação de resultados com PHP + MySQL + CSS

Novo aqui no site? Talvez gostaria de assinar o
RSS feed do site?

Publicado em: 10/11/2008
Área: PHP
Visualizações: 1.451
Comentário(s): 0

imprimir envie por e-mail compartilhe
Paginação de resultados hoje é um processo indispensável no desenvolvimento de sites, principalmente sites onde a quantidade de conteúdo em uma determinada seção é volumosa.

Criar sistemas de paginação nem sempre é uma coisa prazerosa de se fazer e pensando nisso trago para vocês, meus queridos leitores e usuários do Oficina da Net este tutorial mostrando como utilizar o script de paginação de resultados PAGINATOR.

1ª PARTE - As variáveis principais


Veja abaixo cada uma das principais variáveis utilizadas na implantação do script e um exemplo.

$_pagi_sql
(OBRIGATÓRIA)
Deve conter uma instrução SQl válida e sem a cláusula "LIMIT".

$_pagi_cuantos
(OPCIONAL)
(Inteiro) Número de resultados que queremos obter por página. Se não for definido um valor, será 20, que é o valor padrão.

$_pagi_nav_num_enlaces
(OPCIONAL)
(Inteiro) Quantidade de links(páginas) mostrados na barra de navegação. Por padrão são mostrados todos.

$_pagi_mostrar_errores
(OPCIONAL)
(Booleano) Define se são mostrados ou não os erros de MySQL que venham a surgir. Por padrão está como "true".

$_pagi_propagar
(OPCIONAL )
(Array) Contém os nomes das variáveis que se quer enviar pela URL. Por padrão são enviadas todas as que já venham pela URL(GET).

$_pagi_conteo_alternativo
(OPCIONAL)
(Booleano) Define se os registros são contados pelo PHP com mysql_num_rows()(true) ou pelo MySQL, com COUNT ()(false). Por padrão está em "false".
É recomendado que seja mantido com false, a não ser que aconteçam erros de contagem ou resultados inesperados.

$_pagi_separador
(OPCIONAL)
Símbolo que separa os links numéricos na barra de navegação entre as páginas. Por padrão se utiliza " | ".

$_pagi_nav_estilo
(OPCIONAL)
Contém o nome do estilo CSS para os links de paginação da barra de navegação. Por padrão não se especifica o estilo.

$_pagi_nav_anterior
(OPCIONAL)
Contém o que deve aparecer como link para a página anterior. Pode ser uma tag <img>. Por padrão se utiliza "« Anterior".

$_pagi_nav_siguiente
(OPCIONAL)
Contém o que deve aparecer como link para a próxima página. Pode ser uma tag <img>. Por padrão se utiliza "Próxima »".

$_pagi_nav_primera
(OPCIONAL)
Contém o que deve aparecer como link para a primeira página. Pode ser uma tag <img>. Por padrão se utiliza "«« Primeira".

$_pagi_nav_ultima
(OPCIONAL)
Contém o que deve aparecer como link para a última página. Pode ser uma tag <img>. Por padrão se utiliza "Última »»".

Depois você declarar todas essas variáveis, preferencialmente declare-as no início da página, chegou a hora de inserir o script de paginação.

2ª PARTE – Inserindo o script de paginação


Para inserir o script de paginação, vamos fazer via include(). Após declarar as variáveis você deve inserir a seguinte linha:

include (“paginator.inc.php”);

Depois de inserir o script na página, vamos ver agora as variáveis que serão utilizadas para pegar os valores gerados pelo script e inserir a paginação.

3ª PARTE – Variáveis de resultado


As variáveis de resultado são as variáveis que ficam disponíveis após inserir o script. Vejamos.

$_pagi_result
Identificador do resultado da consulta ao Banco de Dados para os registros da página atual. Pronto para ser passado por uma função como mysql_fetch_row(), mysql_fetch_array(), mysql_fetch_assoc(), etc.

$_pagi_navegacion
Variável que contem a barra de navegação com os links para as páginas de resultados.

$_pagi_info
Variável que contém informações sobre os registros da página atual.

4ª PARTE – Aplicando o CSS na paginação.


Depois de declararmos e inserirmos as variáveis, agora vamos dar vida à paginação usando CSS. O código abaixo não faz parte do script, mas está a disposição para download junto com o mesmo no final deste tutorial e foi o mesmo utilizado no exemplo apresentado no final deste artigo.

#paginacao {

     margin: 30px 0px 10px 0px; /* define as margens em relação aos demais objetos da página*/

}

#paginacao p {

        font-size: 14px; /*tamanho da fonte*/
font-family: Trebuchet MS; /*tipo da fonte*/
text-align:left; /*alinhamento do texto*/
margin-top: 10px;/*margem superior*/
margin-bottom: 10px;/*margem inferior*/
color:#006699;/*cor da fonte*/
border:none;/*define sem borda*/

}

#paginacao a {

        border: 1px solid #006699;/*define a borda*/
padding: 5px 10px; /*distância da margem*/
text-decoration: none;/*retira o underline do link*/
color:#006699;/*cor do texto*/

}

#paginacao a:hover {

        background-color: #006699;/*cor de fundo*/
color:#FFFFFF;/*cor do texto*/
padding: 5px 10px;/*distancia da margem*/
text-decoration: none;/*retira o underline do link*/

}


5ª PARTE – O código-fonte da página do exemplo


<?php

include("scripts/conecta_mysql.inc"); //conectando ao banco de dados

$_pagi_sql = "SELECT * FROM tbl_noticias"; //variável com o código SQL da consulta ao banco de dados

$_pagi_cuantos = 2; //número de registros a serem omostrados em cada página

$_pagi_nav_num_enlaces = "5"; //numero de paginas que irão aparecer na paginação

$_pagi_mostrar_errores = false; //desabilitando a apresentação de códigos de erro

$_pagi_conteo_alternativo = false; //desabilitado o tipo de contatdor (padrão)

$_pagi_propagar = array("idnoticia"); //variável a ser propagada pelas páginas

$_pagi_nav_estilo = ""; //nenhum estilo CSS aplicado via arquivo .css

$_pagi_nav_anterior = "<"; //ícone para ir para a página anterior

$_pagi_nav_siguiente = ">"; //ícone para ir para a página seguinte

include("scripts/paginator.inc.php"); //incluindo o script de paginação PAGINATOR

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PAGINATOR: Paginação de resultados com PHP + MySQL + CSS</title>

<style>

#paginacao {  /*div que conterá a paginação*/

    margin: 30px 0px 10px 0px; /* define as margens em relação aos demais objetos da página*/

}

#paginacao p { /*formatação CSS para a tag <p>*/

        font-size: 14px; /*tamanho da fonte*/
font-family: Trebuchet MS; /*tipo da fonte*/
text-align:left; /*alinhamento do texto*/
margin-top: 10px;/*margem superior*/
margin-bottom: 10px;/*margem inferior*/
color:#006699;/*cor da fonte*/
border:none;/*define sem borda*/

}

#paginacao a { /*formatação CSS para a tag <a>*/

        border: 1px solid #006699;/*define a borda*/
padding: 5px 10px; /*distância da margem*/
text-decoration: none;/*retira o underline do link*/
color:#006699;/*cor do texto*/

}

#paginacao a:hover { /*formatação CSS para a tag <a> quando o mouse estiver sobre ela*/

        background-color: #006699;/*cor de fundo*/
color:#FFFFFF;/*cor do texto*/
padding: 5px 10px;/*distancia da margem*/
text-decoration: none;/*retira o underline do link*/

}
</style>
</head>
<body>
<h2>PAGINATOR: Paginação de resultados com PHP + MySQL + CSS</h2>
<h4><?php echo $_pagi_info; /*escreve as informações da paginação*/ ?></h4>
<div>
<?php
// escreverá o título da notícia enquanto a variável $row receber informações do resultado da consulta
while ($row = mysql_fetch_assoc($_pagi_result)) {
    //escreve o título para cada ocorrência de resultado
    echo $row['titulo" target="_blank">."<br />";
}
?>
</div>
<!-- A Paginação -->
<div id="paginacao"><p><?php echo $_pagi_navegacion; ?></p></div>
</body>
</html>

Clique aqui e veja o script em funcionamento.


Arquivo anexo: Clique aqui para download

veja mais
Preencha o formulário para comentar:
Nome:*

E-mail:* (não será exibido)

Site: (http://)

Comentário:*

Deseja receber os comentários no e-mail?

Anti-spam: (nova imagem)





Seja o primeiro a comentar!

Autor da matéria
Jonathan Lamim Antunes
Web Designer e Programador Web (PHP/MySQL) e Desktop (Delphi). Professor de Informática.

Todas as matérias de Jonathan Lamim Antunes

Publicidade
Seguir o Oficina da Net
RSS

RSS

RSS
Top matérias do mês
Matérias relacionadas

© 2005 - 2009 - Oficina da Net - v 4.0 - É proibida a reprodução parcial ou completa do conteúdo deste site sem autorização por escrito. Resolução adequada: 1024x768px.