0
J'utilise actuellement PHP pour paginer mes données de mysql. Je veux utiliser la fonction de chargement de jquery pour charger la page suivante quand un lien sur la pagination est cliqué. liens Pagination ressemblent à ceci:Comment puis-je faire ma pagination php paginate via Jquery AJAX
<div class="paginate">
<a href="index.php?page=2">2</a>
<a href="index.php?page=3">3</a>
<a href="index.php?page=4">4</a>
</div>
J'ai essayé quelque chose comme:
//Pagination Click
$(".paginate a").click(function(){
//CSS Styles
$(".paginate a")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$(".content").load("index.php?page=" + pageNum);
});
});
Voici le code complet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | PHP Pagination</title>
<link rel="stylesheet" type="text/css" href="../../../css/style.css"/>
<script src="../../../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../../../js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>
<style>
.paginate {
font-family:Arial, Helvetica, sans-serif;
padding: 3px;
margin: 3px;
}
.paginate a {
padding:2px 5px 2px 5px;
margin:2px;
border:1px solid #999;
text-decoration:none;
color: #666;
}
.paginate a:hover, .paginate a:active {
border: 1px solid #999;
color: #000;
}
.paginate span.current {
margin: 2px;
padding: 2px 5px 2px 5px;
border: 1px solid #999;
font-weight: bold;
background-color: #999;
color: #FFF;
}
.paginate span.disabled {
padding:2px 5px 2px 5px;
margin:2px;
border:1px solid #eee;
color:#DDD;
}
li{
padding:4px;
margin-bottom:3px;
background-color:#FCC;
list-style:none;}
ul{margin:6px;
padding:0px;}
</style>
</head>
<body>
<?php include '../../../includes/db_connect.php';
include '../time_format.php';
?>
<?php
$tableName="user_microblog";
$targetpage = "index.php";
$limit = 5;
$query = "SELECT COUNT(*) as num FROM $tableName";
$total_pages = mysql_fetch_array(mysql_query($query));
$total_pages = $total_pages['num'];
$stages = 3;
$page = mysql_escape_string($_GET['page']);
if($page){
$start = ($page - 1) * $limit;
}else{
$start = 0;
}
// Get page data
$query1 = "SELECT * FROM $tableName LIMIT $start, $limit";
$result = mysql_query($query1);
// Initial page num setup
if ($page == 0){$page = 1;}
$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($total_pages/$limit);
$LastPagem1 = $lastpage - 1;
$paginate = '';
if($lastpage > 1)
{
$paginate .= "<div class='paginate'>";
// Previous
if ($page > 1){
$paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
}else{
$paginate.= "<span class='disabled'>previous</span>"; }
// Pages
if ($lastpage < 7 + ($stages * 2)) // Not enough pages to breaking it up
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
}
elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few?
{
// Beginning only hide later pages
if($page < 1 + ($stages * 2))
{
for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// Middle hide some front and some back
elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// End only hide early pages
else
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
}
}
// Next
if ($page < $counter - 1){
$paginate.= "<a href='$targetpage?page=$next'>next</a>";
}else{
$paginate.= "<span class='disabled'>next</span>";
}
$paginate.= "</div>";
}
?>
<div id="microblogposts">
<?php
while($row = mysql_fetch_array($result))
{
echo '<div class="microblogpostwrapper">';
echo '<div class="microblogpostimage">';
echo '<img src="../../images/ecyu2wwn.gif" height="48" width="48">';
echo '</div>';
echo '<div class="microblogposttext">';
echo '<p>';
echo '<b class="pink"><a href="/profiles/'.$row['from_username'].'">'.$row['from_username'].'</a></b> ' ;
echo ''.htmlentities (urldecode($row['content'])).'<br />' ;
echo '<font style="color:#888;">'.newtime($row['posttime']).'</font>';
echo'</p> </div>';
echo'<div class="microblogpostactions">
<input type="hidden" style="display:none" name="deleteid" class="deleteid" value="'.$row['id'].'" />
<a href="Javascript:void[0]" class="deletepostbutton">Delete</a>
</div>
</div>';
}
?>
</div>
<script type="text/javascript">
$(document).ready(function(){
//Pagination Click
$(".paginate a").click(function(){
//CSS Styles
$(".paginate a")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$(".content").load("index.php?page=" + pageNum);
});
});
</script>
<?php
// echo $total_pages.' Results';
// pagination
echo $paginate;
?>
<div class="content"></div>
</body>
</html>