Image Image Image Image Image
Scroll to Top

Topo

Blog

10

jan
2012

Sem Comentários

Em Blog
CSS
PHP

Por Allison

Paginação com jQuery

Em 10, jan 2012 | Sem Comentários | Em Blog, CSS, PHP | Por Allison

Vou tentar explicar como fazer uma paginação com jQuery, ou seja, sem precisar dar o tal do refresh no navegador. Vamos usar um pouco de um outro tutorial que mostrei aqui, que é sobre conectar-se ao banco usando PHP. O resto é um pouco de CSS, algumas consultas ao banco com PHP e nada mais.

Vamos fazer um exemplo de uma listagem de feed de noticias, ou seja, listar todas as noticias cadastrada no banco.

Criando a tabela:

CREATE TABLE IF NOT EXISTS `noticias` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `noticias` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Vamos lá ..

Primeiro vamos criar o arquivo index.php

<!DOCTYPE HTML>
<?php
// Contem as informações para se conectar ao banco
include ('conectar_banco.php');
 
// Chamar a classe para conectar o banco
$sql = new conectar_banco();
// Conecta-se ao banco de dados usando os valores padrões
$sql->conecta();
?>
<html>
<head>
<meta charset="utf-8">
 
<title>Paginação com jQuery</title>
<link rel="stylesheet" type="text/css" media="screen" href="css.css">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="paginacao.js"></script>
</head>
 
<body>
<?php
$por_pagina = 7; // NUMERO DE VEZES QUE VAI APARECER ANTES DE CRIAR OUTRA PAGINA
 
// Define e executa uma query SQL
$busca = "SELECT * FROM noticias ";
$sql->consulta($busca);
 
$contar = $sql->contar();
 
$paginas = ceil($contar/$por_pagina)
?>
<div id="conteudo">
    <div>
        <label><img src="loader.gif" alt=""></label>
    </div>
 
    <div id="resultado"></div>
</div>
 
<div id="botao" align="center">
    <ul>
     <?php
      // Mostrar os links da paginação.
      for($i=1; $i<=$paginas; $i++)
      {
        echo '<li id="'.$i.'">'.$i.'</li>';
      }
     ?>
    </ul>
</div>
</body>
</html>

Agora precisamos do arquivo paginacao.js para fazer a mágica acontecer

$(document).ready(function(){
    function showLoader(){
        $('.fundo_pag').fadeIn(200);
    }
    function hideLoader(){
        $('.fundo_pag').fadeOut(200);
    };
 
    $("#botao li").click(function(){
        showLoader();
 
        $("#botao li").css({'background-color' : ''});
        $(this).css({'background-color' : '#D8543A'});
 
        $("#resultado").load("informacao-paginacao.php?page=" + this.id, hideLoader);
 
        return false;
    });
 
    $("#1").css({'background-color' : '#D8543A'});
    showLoader();
    $("#resultado").load("informacao-paginacao.php?page=1", hideLoader);
});

E para que seja feita novas consultas quando solicitado o arquivo paginacao.js, vamos precisar fazer uma nova consulta, com o arquivo informacao-paginacao.php

<?php
include ('conectar_banco.php');
 
// Chamar a classe para conectar o banco
$sql = new conectar_banco();
// Conecta-se ao banco de dados usando os valores padrões
$sql->conecta();
 
// Quantidade por paginda
$por_pagina = 3;
 
// Pegar qual é a numeração da pagina atual
$pagina = $_REQUEST['page'];
 
$inicio = ($pagina-1)*$por_pagina;
$buscar = "SELECT * FROM noticias ORDER BY id LIMIT $inicio,$por_pagina";
$sql->consulta($buscar);
 
while ($paginacao = $sql->resultado())
{
    ?>   <div><?php echo $paginacao['noticias'];?></div><?php
}
?>

E para deixar tudo muito bonito, vamos usar um css.

*{
    margin:0px;
    padding:0px;
    font-family:Tahoma, Geneva, sans-serif
    font-size:0.75em;
}
#conteudo {
    min-height:455px;
    padding:12px;
    margin:0 auto;
    text-decoration: none;
    width: 700px;
}
 
#conteudo .separacao{
    color:#000066;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    padding:5px 5px 12px 5px;
    border-bottom:solid #D8543A 3px;
    text-align:justify;
    margin-bottom:11px;
}
 
.fundo_pag{
    display: none;
    font-size: 13px;
    font-weight: bold;
    height:160px;
    position: absolute;
    padding-top:140px;
    text-align: center;
    opacity:0.5;filter: alpha(opacity=50) ;
    text-decoration: none;
    width: 700px;
}
 
.fundo_pag{
    color:#FFFFFF;
    text-shadow: #fff 0px 0px 20px;
}
 
.fundo_pag label{
    border:solid #66FF00 1px;
}
 
#botao ul{ width: 700px; padding:0px; margin:8px;}
 
#botao ul li {
    -moz-border-radius: 3px 3px 3px 3px;
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    float: left;
    font-family: helvetica,arial,sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin: 0 2px 0px;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    list-style-type:none;
    width: 30px;cursor:pointer;
}
 
#botao ul li:hover{background:#D8543A;}
li:hover{ color: #CC0000; cursor: pointer; }

Bom, estou pegando o jeito com esse negocio de tutorial, mas com o tempo vou melhorando, se você quiser fazer o download desse exemplo é só clicar aqui

Fonte: Renan M. Pimentel/Algoritmizando

Redes Sociais

Tags | , ,

Enviar um Comentário