Tweet [3]
[4]
Paginação em AJAX é muito comum e importante em qualquer site. Hoje, o jQuery é usado para criar paginação espetacular. Vou mostrar como você pode usar o jQuery para criar paginação com estilo!
Segue uma demo e depois o código usado. Veja a demo e faça o download dos ficheiros no fim deste tutorial.
DEMO deste tutorial > Super Paginação Com jQuery, PHP E CSS3 [5]
Código JQuery
$(document).ready(function(){
function showLoader(){
$('.search-background').fadeIn(200);
}
function hideLoader(){
$('.search-background').fadeOut(200);
};
$("#paging_button li").click(function(){
showLoader();
$("#paging_button li").css({'background-color' : ''});
$(this).css({'background-color' : '#D8543A'});
$("#content").load("data.php?page=" + this.id, hideLoader);
return false;
});
$("#1").css({'background-color' : '#D8543A'});
showLoader();
$("#content").load("data.php?page=1", hideLoader);
});
Código HTML
?php
$per_page = 7;
include("dbcon.php");
$sql = "select * from records ";
$rsd = mysql_query($sql);
$count = mysql_num_rows($rsd);
$pages = ceil($count/$per_page)
?>
<div align="center">
<div id="container">
<div class="search-background">
<label><img src="loader.gif" alt="" /></label>
</div>
<div id="content"></div>
</div>
<div id="paging_button" align="center">
<ul>
<?php
//Show page links
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}?>
</ul>
</div>
</div>
Ficheiro data.php
<?php
include("dbcon.php");
$per_page = 7;
$sqlc = "show columns from records";
$rsdc = mysql_query($sqlc);
$cols = mysql_num_rows($rsdc);
$page = $_REQUEST['page'];
$start = ($page-1)*7;
$sql = "select * from records order by id limit $start,7";
$rsd = mysql_query($sql);
?>
<?php
while ($rows = mysql_fetch_assoc($rsd))
{?>
<div class="each_rec"><?php echo $rows['message'];?></div>
<?php
}?>
Download do código usado neste tutorial > Super Paginação Com jQuery, PHP E CSS3 [6]
Tweet [3]
