最近在接触jquery和ajax，当前项目也会用到分页，为了用户体验更好一些，就准备用无刷新分页，这个demo很适合新手学习查看，写的比较清晰，话不多说，直接上代码吧。
首先是html页面，index.html，代码如下：
<!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>php+mysql+ajax+jquery分页</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="ajaxPager.js"></script>
<style>
#main{
width:980px;
margin:0px auto;
}
ul
{
list-style:none;
margin:0px;
}
#list li{
width:220px;
height:280px;
float:left;
margin-left:10px;
}
.pager .cur {
border-top-color: rgb(255, 255, 255);
border: 1px solid #fff;
background: 0;
font-weight: bold;
color: #000;
}
.pager a, .pager span {
margin-top: 5px;
}
.pager a, .pager span {
background: none repeat scroll 0 0 #fff;
border: 1px solid #e7ecf0;
color: #0000cd;
float: left;
height: 22px;
line-height: 22px;
margin-right: 5px;
overflow: hidden;
text-align: center;
text-decoration: none;
width: auto;
padding: 0 8px;
}
.pager span {
background: none repeat scroll 0 0 #fff;
border: 1px solid #e7ecf0;
color: #0000cd;
float: left;
height: 22px;
line-height: 22px;
margin-right: 5px;
overflow: hidden;
text-align: center;
text-decoration: none;
width: auto;
padding: 0 8px;
}
.pager {
border-top: 0;
padding: 12px 0 30px 15px;
float: left;
}
.clearfix {
display: block;
}
.pager {
float: left;
font-family: Arial;
font-size: 13px;
}
.clearfix {
zoom: 1;
}
</style> </head> <body> <div id="main">
<div id="pagecount" class="pager clearfix"></div><div id="loading"></div>
<br />
<br />
<br />
<br />
<div id="list">
<ul></ul>
</div>
</div>
</body>
</html>
样式我随便写的，毕竟我样式写的很差，大家可以自己换样式的。
然后就是js代码了，ajaxPager.js，代码如下：
var curPage = 1; //当前页码
var total,pageSize,totalPage;
//获取数据
function getData(page){
$.ajax({
type: 'POST',
url: 'pages.php',
data: {'pageNum':page-1},
dataType:'json',
beforeSend:function(){
$("#loading").html("<img id='loadin'g src='loading.gif'>");
},
success:function(json){
$("#loading").html("");
$("#list ul").empty();
total = json.total; //总记录数
pageSize = json.pageSize; //每页显示条数
curPage = page; //当前页
totalPage = json.totalPage; //总页数
var li = "";
var list = json.list;
$.each(list,function(index,array){ //遍历json数据列
li += "<li><a href='#'><img src='"+array['pic']+"'></a><p>"+array['title'].substring(0,10)+"</p></li>";
});
$("#list ul").append(li);
},
complete:function(){ //生成分页条
getPageBar();
},
error:function(){
alert("数据加载失败");
}
});
} //获取分页条
function getPageBar(){
//页码大于最大页数
if(curPage>totalPage) curPage=totalPage;
//页码小于1
if(curPage<1) curPage=1;
pageStr = "<span class=''>共"+total+"条"+curPage+"/"+totalPage+"</span>"; //如果是第一页
if(totalPage<=4)
{
if(curPage==1){
pageStr += "<span class='cur'>1</span>";
for(var i=2;i<=totalPage;i++)
{
pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";
}
}else{
pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>";
for(var i=1;i<=totalPage;i++)
{
if(i==curPage)
{
pageStr += "<span class='cur'>"+i+"</span>"
}
else
{
pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";
}
} }
}
else//当页数大于5的时候就要这样显示1 2 3 4 ...
{
if(curPage<=3){
if(curPage==1)
{
pageStr += "<span class='cur'>1</span>";
}
else
{
pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>";
pageStr += "<span class='cur'><a href='javascript:void(0)' rel='1'>1</a></span>";
}
for(var i=2;i<=4;i++)
{
if(i==curPage)
{
pageStr += "<span class='cur'>"+i+"</span>"
}
else
{
pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";
}
}
pageStr += "<span class='cur'>...</span>";
}else{
pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>";
pageStr += "<span class='cur'>...</span>";
if(curPage>totalPage-2)
{
for(var i=totalPage-2;i<=totalPage;i++)
{
if(i==curPage)
{
pageStr += "<span class='cur'>"+i+"</span>"
}
else
{
pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>";
}
}
}
else
{
pageStr += "<a href='javascript:void(0)' rel='"+(curPage-1)+"'>"+(curPage-1)+"</a>";
pageStr += "<span class='cur'>"+curPage+"</span>";
pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>"+(parseInt(curPage)+1)+"</a>";
pageStr += "<span class='cur'>...</span>";
}
}
}
//如果是最后页
if(curPage>=totalPage){
//pageStr += "<span>></span> <span>>></span>";
}else{
pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>></a><a href='javascript:void(0)' rel='"+totalPage+"'>>></a>";
} $("#pagecount").html(pageStr);
} $(function(){
getData(1);
$("#pagecount a").live('click',function(){
var rel = $(this).attr("rel");
if(rel){
getData(rel);
}
});
});
因为项目的需要，我这个页面页数显示只能显示几页，比如就这样 << < ... 5 6 7 ... > >>，要改显示的，就在ajaxPager.js里面改。
$.ajax({ 中url: 'pages.php'，处理就在pages.php中处理。那么就来看看pages.php中的代码：
<?php
include_once('connect.php'); $page = intval($_POST['pageNum']); $result = mysql_query("select id from food");
$total = mysql_num_rows($result);//总记录数 $pageSize = 8; //每页显示数
$totalPage = ceil($total/$pageSize); //总页数 $startPage = $page*$pageSize;
$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage;
$query = mysql_query("select id,title,pic from food order by id asc limit $startPage,$pageSize");
while($row=mysql_fetch_array($query)){
$arr['list'][] = array(
'id' => $row['id'],
'title' => $row['title'],
'pic' => $row['pic'],
);
}
//print_r($arr);
echo json_encode($arr);
?>
上面当然还有数据库连接了啦，这个应该很简单吧，还是贴出来connect.php：
<?php
include_once('connect.php'); $page = intval($_POST['pageNum']); $result = mysql_query("select id from food");
$total = mysql_num_rows($result);//总记录数 $pageSize = 8; //每页显示数
$totalPage = ceil($total/$pageSize); //总页数 $startPage = $page*$pageSize;
$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage;
$query = mysql_query("select id,title,pic from food order by id asc limit $startPage,$pageSize");
while($row=mysql_fetch_array($query)){
$arr['list'][] = array(
'id' => $row['id'],
'title' => $row['title'],
'pic' => $row['pic'],
);
}
//print_r($arr);
echo json_encode($arr);
?>
然后就完成了，具体思路很清晰，点击页数的时候jquery获取rel中的页面值，传进去数据库获取相应数据展现在页面上。
然后还有数据库吧，我的表示这样的：
1 CREATE TABLE IF NOT EXISTS `food` (
2 `id` int(11) NOT NULL AUTO_INCREMENT,
3 `title` varchar(100) NOT NULL,
4 `pic` varchar(255) NOT NULL,
5 PRIMARY KEY (`id`)
6 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=31 ;
我这边有一个demo，然后大家可以下载看看。多多指教。
http://pan.baidu.com/share/link?shareid=1518322039&uk=67299903