essa paginação está funcionando perfeitamente, só tem uma coisa, quando a pessoa dece até o final ela traz o último registro do banco tudo certo, ai ela fica mostrando a mensagem de Carregando...
mesmo não tendo mais nada a exibir, como poderia arrumar isso? outra coisa, ao subir o scroll esconder novamente os resultados do banco exibido com o scroll rolado para baixo
HTML
<div id="posts">
</div>
<h1 id="carregando">Carregando...</h1>
PHP
<? php
require "Db.php";
$db = new Db;
$ipp = 10;
$pagina = (isset($_GET['pagina'])) ? (int) $_GET['pagina'] : 0;
$itens = $pagina * $ipp;
$ret = $db - > query(sprintf("SELECT codigo, titulo, texto, imagem FROM post LIMIT %d OFFSET %d", $ipp, $itens));
if ($ret - > num_rows > 0) {
// retorna os dados para a tela no formato json
$retorno = array();
while ($post = $ret - > fetch_assoc()) {
$retorno[] = $post;
}
response(array("erro" => false, "inicio" => $itens + 1, "fim" => $itens + $ret - > num_rows, "itensporpagina" => $ipp, "posts" => $retorno));
} else {
// retorna erro = true no formato json para a tela
response(array("erro" => true));
}
// retorna dados no formato json para a tela do sistema
function response($response) {
header("Content-Type: application/json");
echo json_encode($response);
}
jquery
var pagina = 0;
function loadPosts() {
$("#carregando").show();
$.ajax({
url: "dados.php?pagina=" + pagina,
dataType: "json"
}).done(function(data) {
$("#carregando").hide();
if (data.erro) return;
var divposts = $("#posts");
$.each(data.posts, function(key, val) {
divposts.append("<div style='display:table; width:100%'><img src='" + val.imagem + "' align='left' style='margin-right:10px; margin-bottom:10px;' /><h2>" + val.titulo + " / " + val.codigo + "</h2><p>" + val.texto + "</p></div>");
});
pagina++;
});
}
$(function() {
$("#carregando").hide();
loadPosts();
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
// carrega os posts
loadPosts();
}
});
});