21,887
社区成员
发帖
与我相关
我的任务
分享【原创】分页高级教程：结合JQUERY做AJAX分页
本文主要结合JQUERY做无刷新分页。代码基本上和前两篇文章差不多，稍稍有所变动。本文中的翻页链接用JS编写。先上代码：
page4.php
page5.php
page4.php
<!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>结合jquery做ajax分页</title>
<style>
body{ font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif}
.page A{ padding:3px 5px; float:left; border:solid #CCCCCC 1px; text-decoration:none; font-size:12px; margin-left:1px; font-family:Verdana;color:#000000;}
.page A.currentpage{ color:#FF0000; border: solid red 1px;}
.page A:hover{ background-color:#CCCCCC;}
</style>
<script language="javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body><?
//PHP分页实例
//分页尺寸
$page_size=10;
$conn=mysql_connect("localhost","root","root") or die(mysql_error());
mysql_select_db("xinyang");
//计算总行数
$total_records=mysql_num_rows(mysql_query("SELECT id from product"));
//总页数
$total_page=ceil($total_records/$page_size);
$query=mysql_query("select * from product limit 0,$page_size") or die(mysql_error());
?>
<div class="recordlist">
<ul>
<?
while ($rs=mysql_fetch_array($query))
{
?>
<li><?=$rs["id"]?>-<?=$rs["ename"]?></li>
<?
}
?>
</ul>
</div>
<div class='page'></div>
</body>
</html>
<script language="javascript">
var total_page=<?=$total_page?>;
var url="page5.php?page";//当前链接,格式如下，例如：?aa=1&page ,somepage.php?action=1&cat=1&page
$().ready(function(){
$(".page").html(pagination(1))
page_link();
})
function page_link()
{
$(".page A").click(function(){
var page=parseInt($(this).attr("page"))
$(".recordlist").load($(this).attr("href"),"",function(){$(".page").html(pagination(page));page_link();})
return false;
})
}
function pagination(current_page)
{
//翻页链接开始
current_page = current_page<=0 ? 1 : current_page;
current_page = current_page>total_page?total_page:current_page;
var page_link="";
if (total_page>1)
{
page_link="<a>一共"+total_page+"页</a>";
page_link+="<a>当前第"+current_page+"页</a>";
page_link+="<a href="+url+"=1 page=1>首页</a>";
if (current_page>1){
//页码大于1的时候，显示上一页翻页链接
var pre_page=current_page-1;
page_link+="<a href='"+url+"="+pre_page+"' page="+pre_page+"><<</a>";
}
//翻页列表
//步进分页，翻页列表的数字始终只显示9个或者自定义的个数,本例定义只显示9个,当前页左右各显示4个页码
if (total_page>9)
{
if (current_page>4)
{
var from=current_page-4;
var to=current_page+4;
if (to>total_page)
{
var from=total_page-8;
var to=total_page;
}
}
else
{
var from=1;
var to=9;
}
}
else
{
var from=1;
var to=total_page;
}
for (var i=from;i<=to;i++)
{
if (i==current_page)
{
//高亮当前页页码
page_link+="<a href='"+url+"="+i+"' class='currentpage' page="+i+">"+i+"</a>";
}
else
{
page_link+="<a href='"+url+"="+i+"' page="+i+" page="+i+">"+i+"</a>";
}
}
//页码小于总页数的时候显示下一页翻页链接
var next_page=current_page+1;
if(next_page<total_page)
{
page_link+="<a href='"+url+"="+next_page+"' page="+next_page+">>></a>";
}
page_link+="<a href='"+url+"="+total_page+"' page="+total_page+">最后一页</a>";
}
return page_link;
}
</script>
page5.php
<?
$page=$_GET["page"]+0;
$page= $page<=0 ? 1 : $page;
//分页尺寸
$page_size=10;
$conn=mysql_connect("localhost","root","root") or die(mysql_error());
mysql_select_db("xinyang");
$offset=($page-1)*$page_size;
$query=mysql_query("select * from product limit $offset,$page_size") or die(mysql_error());
?>
<ul>
<?
while ($rs=mysql_fetch_array($query))
{
?>
<li><?=$rs["id"]?>-<?=$rs["ename"]?></li>
<?
}
?>
</ul>
...全文
请发表友善的回复…
发表回复
dirtmelon 2014-05-18
- 打赏
- 举报
好用，非常感谢
anders2 2012-08-22
- 打赏
- 举报
page5.php有什么 用吗？
mu_rain 2012-06-26
- 打赏
- 举报
几点意见.
1 pagination 函数用意是拼接输出字符串，建议封装为模板.
2 此分页，没有考虑带上查询条件。
1 pagination 函数用意是拼接输出字符串，建议封装为模板.
2 此分页，没有考虑带上查询条件。
tottyandbaty 2012-02-01
- 打赏
- 举报
本文的核心部分就是JS部分的 page_link()函数，当用户点击翻页链接之后，脚本将对div.recordlist绑定一个load事件，这个主要用来加载下一页的内容。
看看jquery手册上对load事件的说明：载入远程 HTML 文件代码并插入至 DOM 中。
如果我们仅仅只这样：
$(".recordlist").load($(this).attr("href")) 这样是可以翻页，但是问题出现了，发现翻页链接不能发生变化，，，所以需要在回调函数里面，重新初始化翻页链接，因此在回调函数总加入$(".page").html(pagination(page))；这里初始化翻页之后，需要对.page A重新绑定click事件，因此在回调函数里面加上page_link().
由于是点击的的对象是.page A,点击之后，会发生跳转，因此必须终止跳转，所以必须加上return false来终止。。。
暂且说这么多，欢迎拍砖~
看看jquery手册上对load事件的说明：载入远程 HTML 文件代码并插入至 DOM 中。
如果我们仅仅只这样：
$(".recordlist").load($(this).attr("href")) 这样是可以翻页，但是问题出现了，发现翻页链接不能发生变化，，，所以需要在回调函数里面，重新初始化翻页链接，因此在回调函数总加入$(".page").html(pagination(page))；这里初始化翻页之后，需要对.page A重新绑定click事件，因此在回调函数里面加上page_link().
由于是点击的的对象是.page A,点击之后，会发生跳转，因此必须终止跳转，所以必须加上return false来终止。。。
暂且说这么多，欢迎拍砖~
xiachao2008 2012-02-01
- 打赏
- 举报
学习了…………
qq634818668 2012-02-01
- 打赏
- 举报
减少一些js操作
qq634818668 2012-02-01
- 打赏
- 举报
你将分页链接和内容做成一个模板 每次请求的时候把整个模板load这个模板就行
