JS對數(shù)據(jù)分頁的封裝方法

本文為原創(chuàng)代碼，轉(zhuǎn)載請注明出處：http://www.pm-road.com/index.php/2014/07/24/26/

因為web端經(jīng)常會展示很多數(shù)據(jù)，如果一頁下來，肯定會看的眼花繚亂，所以肯定會用到分頁的方法；網(wǎng)上會有很多分頁的方法，但像這種情況， 我都會自己去寫這樣方法，而不是照網(wǎng)上的搬過來；以下就是自己封裝的一個方法，非常容易懂，也用做自己以后開發(fā)中的一個方法，代碼如下(前提需要引入 JQuery.js)：

/**
* 其中會傳入三個參數(shù),另外在代碼中有一個方法beginPostTestResult(page),* 該方法是需要自己寫的方法，該方法的作用就是向后臺發(fā)出請求，得回數(shù)據(jù)的方法；
* @param page 當前頁
* @param maxPage 最大頁
* @param divId 你要把這個頁分的顯示放在哪個div中，傳入divId
*/
function initPageInfo(page,maxPage,divId){
$("#"+divId).html("");
var kongge = "    ";
var firstPage = "首頁";
var prePage = "上一頁";
var endPage = "末頁";
var nextPage = "下一頁";
if(page < 1){
page = 1;
}
if(page > maxPage ){
page = maxPage ;
}
if(page == 1 && page < maxPage){
endPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末頁</a>”;
nextPage =  “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一頁</a>”;
}else if(page >1 && page < maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首頁</a>”;
prePage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一頁</a>”;
endPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末頁</a>”;
nextPage =  “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一頁</a>”;
}else if(page > 1 && page == maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首頁</a>”;
prePage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一頁</a>”;
}
$(“#”+divId).html(firstPage+kongge+prePage+kongge+page+kongge+nextPage+kongge+endPage);
}

一般情況下，我都會這樣去用此方法：

function beginPostTestResult(page){

$.post(url,{參數(shù)},function(data,state,response){

//TODO你的操作

//注意：參數(shù)page 都要是×××的，不能是字符型

initPageInfo(page,maxPage,divId);

},”json”);

}