Publicado em 30 de out.

Paginação PHP, MYSQL e AJAX

Boa tarde galera, eu tive muitos problemas para fazer uma paginação sem refresh no meu último projeto e finalmente consegui resolver ^^

vou colaborar com o forum, mostrando como eu consegui resolver isto.

encontrei o script na internet, e fiz algumas alterações

créditos: Software livre Acre

Me desculpem é o primeiro post, colaborando espero ter postado de forma correta...

chega de papo e vamos lá:

index.php

<!DOCTYPE HTML>

<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Paginação sem refresh</title>
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<?php
	//chamando a função para conectar ao banco de dados (Sua conexão com o db mysql)
	Conectar();

	//select com o contador para descobrir quantos resultados a tabela tem
	$result_p = mysql_query("select count(*) as count FROM sua_tabela");
	$row_p = mysql_fetch_array($result_p);

	//quantos resultados aparecerão por página
	$quant_resul = 24;
	//página em que sua paginação começara
	$pagina = 1;

	//calcula a quantidade de paginas
	$paginas = ceil($row_p['count'] / $quant_resul);

	//select com os valores limitados
	$result = mysql_query("select *FROM obras limit 0 , " . $quant_resul);
?>

<div id="dados"><!-- aqui é mostrada a paginação -->
 <ul>
 <?php
 while ($row = mysql_fetch_object($result)) {//exemplo de laço
 echo'<li>';
 echo"<img src='uploads/images/".$row->miniatura."' />";
 echo'</li>';
 };

 //incluindo a página de índice ela é responsável por imprimir os valores das páginas e seus link's.
 include 'indice.php';
 ?>
 </ul>
 </div>
</body>
</html>

indice.php

<?php
echo "<div id='paginacao'>";
 //Verifica se está na primeira página, se não estiver exibe o botão anterior e o numero da página inicial
 //Se não ele desativa o botão de anterior e seta a primeira página
 if ($pagina > 1) {
echo ' <a class="pg" href="javascript:paginar(' . ($pagina - 2) . ',' . $paginas . ',' . $quant_resul . ')">« anterior</a> ';
 echo ' <a class="pg" href="javascript:paginar(0,' . $paginas . ',' . $quant_resul . ')">1</a> ';
 } else {
 echo "<font color=#CCCCCC>« anterior</font>";
 echo " <span class='pgoff'>1</span> ";
 }

 //mostrando as demais páginas
 for ($i = $pagina; $i <= ($pagina + 1); $i++) {
 //imprindo o botão da página antes da atual, ela necessita ser diferente da primeira página
 if (($i - 1) == ($pagina - 1) and ($i - 1) != 1 and ($i != 1)) {
 echo '... <a class="pg" href="javascript:paginar(' . ($i - 2) . ',' . $paginas . ',' . $quant_resul . ')">' . ($i - 1) . '</a> ';
 }
 //verificando se estamos na primeira página ou na ultima se estiver ele não imprime nada.
 if ($i == 1 or $i == $paginas or $i == $paginas) {
 echo"";
 }
 //se a página for igual a página atual ele seta o indicador na página e desativa o botão
 elseif ($pagina == $i) {
 echo " <span class='pgoff'>$i</span> ";
 }
 //imprimindo a página após a página atual,
 elseif ($i < $pagina) {
 echo ' <a class="pg" href="javascript:paginar(' . $i - 1 . ',' . $paginas . ',' . $quant_resul . ')">' . $i . '</a> ';
 }
 if (($i + 1) == ($pagina + 1) and ($i + 1) != $paginas and $i != $paginas) {
 echo ' <a class="pg" href="javascript:paginar(' . ($i) . ',' . $paginas . ',' . $quant_resul . ')">' . ($i + 1) . '</a> ...';
 }
 }
 //verificando novamente se existe apenas a primeira página, se so existir ela é impresso o botão proximo desativado
 if ($paginas == 1) {
 echo "";
 echo "<font color=#CCCCCC>próximo »</font>";
 }
 //verificando se a página atual é diferente da ultima página se for diferente ele imprime a ultima página e ativa o botão próximo
 elseif ($pagina < $paginas) {

 echo ' <a class="pg" href="javascript:paginar(' . ($paginas - 1) . ',' . $paginas . ',' . $quant_resul . ')">' . $paginas . '</a>';
 echo ' <a class="pg" href="javascript:paginar(' . ($pagina) . ',' . $paginas . ',' . $quant_resul . ')"><b>próximo »</b></a> ';
 }
 // se o sistema estiver na ultima página o indicador é setado na página e o botão próximo é desativado
 else {
 echo " <span class='pgoff'>" . $paginas . "</span> ";
 echo "<font color=#CCCCCC>próximo »</font>";
 }
echo "</div>";
?>

op.php

<?php
// recebe conteudo da pagina anterior por post

$pagina = $_POST['pagina'];
$quant_resul = $_POST['quant_result'];
$paginas = $_POST['paginas'];
// calculando onde o limit deve começar no Select
$start = $pagina * $quant_resul;
$pagina++;

//conecta com o banco (Sua conexão com o banco, no meu caso estou chamando uma função)

Conectar();

//select com os limites definidos (inicio e quantidade de resultados)
$result = mysql_query("SELECT * FROM sua_tabela limit " . $start . " , " . $quant_resul);

//impresão dos valores que serão trocados dentro da DIV dados

 echo '<ul>';
 while ($row = mysql_fetch_object($result)) {
 echo'<li>';
 echo"<img src='uploads/images/".$row->miniatura."' />";//neste caso como podem ver acima eu escolho a linha($row) pegando a coluna miniatura
echo'</li>';
 };
 echo '</ul>';

 //incluindo a página de índice ela é responsável por imprimir os valores das páginas e seus link's.
include 'indice.php';
?>

script.js

este é o script ajax, que faz carregar a página sem efetuar o refresh/reload a imagem "carregando.gif" vocês podem utilizar qualquer uma que seja da sua preferência,

que será mostrada enquanto a paginação estiver carregando os resultados

function paginar(pagina,paginas, quant_result ){
 $("#dados").html("<img src='images/carregando.gif' class='carregando' />");
 $.post("op.php", {pagina:pagina, paginas:paginas, quant_result:quant_result}, function(data){$("#dados").html(data);}, "html") ;
};

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

<html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Paginação sem refresh</title> <script type="text/javascript" src="script.js"></script> </head> <body> <?php //chamando a função para conectar ao banco de dados (Sua conexão com o db mysql) Conectar(); //select com o contador para descobrir quantos resultados a tabela tem $result_p = mysql_query("select count(*) as count FROM sua_tabela"); $row_p = mysql_fetch_array($result_p); //quantos resultados aparecerão por página $quant_resul = 24; //página em que sua paginação começara $pagina = 1; //calcula a quantidade de paginas $paginas = ceil($row_p['count'] / $quant_resul); //select com os valores limitados $result = mysql_query("select *FROM obras limit 0 , " . $quant_resul); ?> <div id="dados"> <ul> <?php while ($row = mysql_fetch_object($result)) {//exemplo de laço echo'<li>'; echo"<img src='uploads/images/".$row->miniatura."' />"; echo'</li>'; }; //incluindo a página de índice ela é responsável por imprimir os valores das páginas e seus link's. include 'indice.php'; ?> </ul> </div> </body> </html>

<?php echo "<div id='paginacao'>"; //Verifica se está na primeira página, se não estiver exibe o botão anterior e o numero da página inicial //Se não ele desativa o botão de anterior e seta a primeira página if ($pagina > 1) { echo ' <a class="pg" href="javascript:paginar(' . ($pagina - 2) . ',' . $paginas . ',' . $quant_resul . ')">« anterior</a> '; echo ' <a class="pg" href="javascript:paginar(0,' . $paginas . ',' . $quant_resul . ')">1</a> '; } else { echo "<font color=#CCCCCC>« anterior</font>"; echo " <span class='pgoff'>1</span> "; } //mostrando as demais páginas for ($i = $pagina; $i <= ($pagina + 1); $i++) { //imprindo o botão da página antes da atual, ela necessita ser diferente da primeira página if (($i - 1) == ($pagina - 1) and ($i - 1) != 1 and ($i != 1)) { echo '... <a class="pg" href="javascript:paginar(' . ($i - 2) . ',' . $paginas . ',' . $quant_resul . ')">' . ($i - 1) . '</a> '; } //verificando se estamos na primeira página ou na ultima se estiver ele não imprime nada. if ($i == 1 or $i == $paginas or $i == $paginas) { echo""; } //se a página for igual a página atual ele seta o indicador na página e desativa o botão elseif ($pagina == $i) { echo " <span class='pgoff'>$i</span> "; } //imprimindo a página após a página atual, elseif ($i < $pagina) { echo ' <a class="pg" href="javascript:paginar(' . $i - 1 . ',' . $paginas . ',' . $quant_resul . ')">' . $i . '</a> '; } if (($i + 1) == ($pagina + 1) and ($i + 1) != $paginas and $i != $paginas) { echo ' <a class="pg" href="javascript:paginar(' . ($i) . ',' . $paginas . ',' . $quant_resul . ')">' . ($i + 1) . '</a> ...'; } } //verificando novamente se existe apenas a primeira página, se so existir ela é impresso o botão proximo desativado if ($paginas == 1) { echo ""; echo "<font color=#CCCCCC>próximo »</font>"; } //verificando se a página atual é diferente da ultima página se for diferente ele imprime a ultima página e ativa o botão próximo elseif ($pagina < $paginas) { echo ' <a class="pg" href="javascript:paginar(' . ($paginas - 1) . ',' . $paginas . ',' . $quant_resul . ')">' . $paginas . '</a>'; echo ' <a class="pg" href="javascript:paginar(' . ($pagina) . ',' . $paginas . ',' . $quant_resul . ')"><b>próximo »</b></a> '; } // se o sistema estiver na ultima página o indicador é setado na página e o botão próximo é desativado else { echo " <span class='pgoff'>" . $paginas . "</span> "; echo "<font color=#CCCCCC>próximo »</font>"; } echo "</div>"; ?>

echo '<ul>'; while ($row = mysql_fetch_object($result)) { echo'<li>'; echo"<img src='uploads/images/".$row->miniatura."' />";//neste caso como podem ver acima eu escolho a linha($row) pegando a coluna miniatura echo'</li>'; }; echo '</ul>'; //incluindo a página de índice ela é responsável por imprimir os valores das páginas e seus link's. include 'indice.php'; ?>

function paginar(pagina,paginas, quant_result ){ $("#dados").html("<img src='images/carregando.gif' class='carregando' />"); $.post("op.php", {pagina:pagina, paginas:paginas, quant_result:quant_result}, function(data){$("#dados").html(data);}, "html") ; };