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