如何通过jqueryajax对php分页
我目前正在使用PHP对mysql中的数据进行分页。我想在单击分页上的链接时使用jquery load函数加载下一页。分页链接如下所示:如何通过jqueryajax对php分页,php,jquery,ajax,paginate,Php,Jquery,Ajax,Paginate,我目前正在使用PHP对mysql中的数据进行分页。我想在单击分页上的链接时使用jquery load函数加载下一页。分页链接如下所示: <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> </d
<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>
以下是完整的代码:
<!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>
Papermashup.com | PHP分页
帕吉纳{
字体系列:Arial、Helvetica、无衬线字体;
填充:3倍;
保证金:3倍;
}
.编页码{
填充物:2px 5px 2px 5px;
保证金:2倍;
边框:1px实心#999;
文字装饰:无;
颜色:#666;
}
.paginate a:悬停,.paginate a:激活{
边框:1px实心#999;
颜色:#000;
}
.paginate跨距电流{
保证金:2倍;
填充物:2px 5px 2px 5px;
边框:1px实心#999;
字体大小:粗体;
背景色:#999;
颜色:#FFF;
}
.paginate span.disabled{
填充物:2px 5px 2px 5px;
保证金:2倍;
边框:1px实心#eee;
颜色:#DDD;
}
李{
填充:4px;
利润底部:3倍;
背景色:#FCC;
列表样式:无;}
ul{保证金:6px;
填充:0px;}
$(文档).ready(函数(){
//分页点击
$(“.paginate a”)。单击(函数(){
//CSS样式
$(“.paginate a”)
.css({'border':'solid#dddddd 1px'})
.css({'color':'#0063DC'});
$(本)
.css({'color':'#FF0084'})
.css({'border':'none'});
//加载数据
var pageNum=this.id;
$(“.content”).load(“index.php?page=“+pageNum”);
});
});
如果我理解您的问题,即您希望加载与链接关联的页面,请尝试修改jquery以便
$(".paginate a").click(function(){
//CSS Styles
$(".paginate a")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
$(".content").load($(this).attr("href"));
}))
})) 请尝试使用来处理大部分分页。使用它,它的工作很好,加上排序和过滤已经为您完成
$(".paginate a").click(function(){
//CSS Styles
$(".paginate a")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
$(".content").load($(this).attr("href"));