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)
Carregando comentários...