這幾天做畢業設計的時候需要使用到一個異步分頁的功能，即翻頁的時候只是刷新分頁的數據而不是刷新整個頁面。因為之前做項目的時候沒有做過這方面的功能，所以還是糾結了挺長時間的，在網上也找了很多資料，結合自己的理解，做了一個比較簡單的異步分頁數據顯示功能，這里使用的是jQuery+Ajax+PHP。
先說說基本原理吧，其實就是翻頁時使用Ajax向后台傳遞頁面參數請求某個分頁的數據，后台接收到參數之后就在數據庫中查詢相應的記錄，然后以json的格式傳輸給Ajax，Ajax接收到數據后，使用jQuery在html頁面上移除原來舊的分頁數據，添加上新的分頁數據，同時根據分頁情況添加分頁按鈕欄。
下面看看簡單的代碼實現：
1. html頁面：
<body> <div id="data-area"> <ul>
<!--這里添加分頁數據-->
</ul> </div> <div id="pageBar"><!--這里添加分頁按鈕欄--></div> </body>
2. js代碼：
var curPage; //當前頁數
var totalItem; //總記錄數
var pageSize; //每一頁記錄數
var totalPage; //總頁數
//獲取分頁數據
function turnPage(page)
{
$.ajax({
type: 'POST',
url: commentDataUrl, //這里是請求的后台地址，自己定義
data: {'pageNum':page},
dataType: 'json',
beforeSend: function() {
$("#data-area ul").append("加載中...");
},
success: function(json) {
$("#data-area ul").empty(); //移除原來的分頁數據
totalItem = json.totalItem;
pageSize = json.pageSize;
curPage = page;
totalPage = json.totalPage;
var data_content = json.data_content;
var data_html = "";
$.each(data_content,function(index,array) { //添加新的分頁數據（數據的顯示樣式根據自己頁面來設置，這里只是一個簡單的列表）
data_html += "<li>"+array['id']+" "+array['name']+" "+array['num']+" "+array['flag']+"</li>";
});
$("#data-area ul").append(data_html);
},
complete: function() { //添加分頁按鈕欄
getPageBar();
},
error: function() {
alert("數據加載失敗");
}
});
}
//獲取分頁條（分頁按鈕欄的規則和樣式根據自己的需要來設置）
function getPageBar()
{
if(curPage > totalPage) {
curPage = totalPage;
}
if(curPage < 1) {
curPage = 1;
}
pageBar = "";
//如果不是第一頁
if(curPage != 1){
pageBar += "<span class='pageBtn'><a href='javascript:turnPage(1)'>首頁</a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+(curPage-1)+")'><<</a></span>";
}
//顯示的頁碼按鈕(5個)
var start,end;
if(totalPage <= 5) {
start = 1;
end = totalPage;
} else {
if(curPage-2 <= 0) {
start = 1;
end = 5;
} else {
if(totalPage-curPage < 2) {
start = totalPage - 4;
end = totalPage;
} else {
start = curPage - 2;
end = curPage + 2;
}
}
}
for(var i=start;i<=end;i++) {
if(i == curPage) {
pageBar += "<span class='pageBtn-selected'><a href='javascript:turnPage("+i+")'>"+i+"</a></span>";
} else {
pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+i+")'>"+i+"</a></span>";
}
}
//如果不是最后頁
if(curPage != totalPage){
pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+(parseInt(curPage)+1)+")'>>></a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+totalPage+")'>尾頁</a></span>";
}
$("#pageBar").html(pageBar);
}
//頁面加載時初始化分頁
$(function() {
turnPage(1);
});
3. PHP代碼：
//我項目中使用的是ThinkPHP框架，Ajax的請求地址是一個方法
public function getLabelData() { $pageNum = I('pageNum'); $totalItem = M('label')->count(); $pageSize = 6; $totalPage = ceil($totalItem/$pageSize); $startItem = ($pageNum-1) * $pageSize; $arr['totalItem'] = $totalItem; $arr['pageSize'] = $pageSize; $arr['totalPage'] = $totalPage; $labels = M('label')->limit($startItem,$pageSize)->select(); foreach($labels as $lab) { $arr['data_content'][] = $lab; } echo json_encode($arr); }
4. 分頁按鈕欄樣式CSS：
#pageBar {
text-align: right;
padding: 0 20px 20px 0;
}
.pageBtn a {
display: inline-block;
border: 1px solid #aaa;
padding: 2px 5px;
margin : 0 3px;
font-size: 13px;
background: #ECECEC;
color: black;
text-decoration: none;
-moz-border-radius: 2px;
-webkit-border-radius: 3px;
}
.pageBtn-selected a {
display: inline-block;
border: 1px solid #aaa;
padding: 2px 5px;
margin : 0 3px;
font-size: 13px;
background: #187BBD;
color: white;
text-decoration: none;
-moz-border-radius: 2px;
-webkit-border-radius: 3px;
}
.pageBtn a:hover {
background: #187BBD;
color: white;
}
5. 實現效果：
（總是顯示五個數字頁面按鈕，數字跟着當前所在頁面變化）
其實，異步分頁的應用還是挺廣泛的，有些應用並不是很明顯地看上去就是數據分頁，但本質上還是異步分頁，例如：一些網站上的“換一批”功能，其實就是異步分頁的變形，我們只要把分頁按鈕欄的規則和顯示效果修改一下就可以輕松實現了！！！