http://liujinzhong.javaeye.com/blog/369975
做項目時偶爾有需求：數據一次性加載到頁面同時還要實現分頁，此時有兩種方式一種是提交到當前頁，這個裏面會有一些變量需要置爲hidden域，另外一種就是純js分頁。利用第一種方式效率不太高，存在多次訪問數據庫的問題，因而對於這種需要常常採用第二種方式。demo如下，實現思路：頁面數據一次性全部加載完畢，js部分通過函數控制其是否顯示達到分頁的功能，有一個方法通過遞歸即可全部實現上一頁、下一頁、首頁、尾頁的功能，同時頁面顯示的分頁點擊部分也是由js內部innerHTML寫入
1、js部分(單獨保存爲page.js)--js中的加減參數需要根據實際情形決定，即table第一行開始到真正的數據行之間有幾行，則加減參數就是幾
/**
* 分頁函數
* pno--頁數
* psize--每頁顯示記錄數
* 分頁部分是從真實數據行開始，因而存在加減某個常數，以確定真正的記錄數
* 純js分頁實質是數據行全部加載，通過是否顯示屬性完成分頁功能
**/
function goPage(pno,psize){
var itable = document.getElementById("idData");
var num = itable.rows.length;//表格行數
var totalPage = 0;//總頁數
var pageSize = psize;//每頁顯示行數
if((num-1)/pageSize > parseInt((num-1)/pageSize)){
totalPage=parseInt((num-1)/pageSize)+1;
}else{
totalPage=parseInt((num-1)/pageSize);
}
var currentPage = pno;//當前頁數
var startRow = (currentPage - 1) * pageSize+1;//開始顯示的行
var endRow = currentPage * pageSize+1;//結束顯示的行
endRow = (endRow > num)? num : endRow;
//前三行始終顯示
for(i=0;i<1;i++){
var irow = itable.rows[i];
irow.style.display = "block";
}
for(var i=1;i<num;i++){
var irow = itable.rows[i];
if(i>=startRow&&i<endRow){
irow.style.display = "block";
}else{
irow.style.display = "none";
}
}
var pageEnd = document.getElementById("pageEnd");
var tempStr = "共"+(num-1)+"條記錄 分"+totalPage+"頁 當前第"+currentPage+"頁";
if(currentPage>1){
tempStr += "<a href=/"#/" onClick=/"goPage("+(currentPage-1)+","+psize+")/">上一頁</a>"
}else{
tempStr += "上一頁";
}
if(currentPage<totalPage){
tempStr += "<a href=/"#/" onClick=/"goPage("+(currentPage+1)+","+psize+")/">下一頁</a>";
}else{
tempStr += "下一頁";
}
if(currentPage>1){
tempStr += "<a href=/"#/" onClick=/"goPage("+(1)+","+psize+")/">首頁</a>";
}else{
tempStr += "首頁";
}
if(currentPage<totalPage){
tempStr += "<a href=/"#/" onClick=/"goPage("+(totalPage)+","+psize+")/">尾頁</a>";
}else{
tempStr += "尾頁";
}
document.getElementById("barcon").innerHTML = tempStr;
}
2、html部分
<html>
<head>
<script type="text/javascript" src="page.js"></script>
</head>
<body onLoad="goPage(1,10);">
<table id="idData" width="70%">
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>戶籍</td>
</tr>
<tr>
<td>劉金鐘</td>
<td>25</td>
<td>男</td>
<td>山西呂梁</td>
</tr>
<tr>
<td>liujinzhong1</td>
<td>25</td>
<td>男</td>
<td>山西呂梁</td>
</tr>
<tr>
<td>liujinzhong2</td>
<td>25</td>
<td>男</td>
<td>山西呂梁</td>
</tr>
<tr>
<td>liujinzhong3</td>
<td>25</td>
<td>男</td>
<td>山西呂梁</td>
</tr>
<tr>
<td>liujinzhong4</td>
<td>25</td>
<td>男</td>
<td>山西呂梁</td>
</tr>
<tr>
<td>liujinzhong5</td>
<td>25</td>
<td>男</td>
<td>山西呂梁</td>
</tr>
<tr>
<td>liujinzhong6</td>
<td>25</td>
<td>男</td>
<td>山西呂梁</td>
</tr>
<tr>
<td>liujinzhong7</td>
<td>25</td>
<td>男</td>
<td>山西呂梁</td>
</tr>
<tr>
<td>liujinzhong</td>
<td>25</td>
<td>男</td>
<td>山西呂梁</td>
</tr>
<tr>
<td>liujinzhong</td>
<td>25</td>
<td>男</td>
<td>山西呂梁</td>
</tr>
<tr>
<td>liujinzhong</td>
<td>25</td>
<td>男</td>
<td>山西呂梁</td>
</tr>
<tr>
<td>liujinzhong</td>
<td>25</td>
<td>男</td>
<td>山西呂梁</td>
</tr>
<tr>
<td>liujinzhong</td>
<td>25</td>
<td>男</td>
<td>山西呂梁</td>
</tr>
</table>
<table width="60%" align="right">
<tr>
<td>
<div id="barcon" name="barcon"></div>
</td>
</td>
</table>
</body>
</html>
直接運行就會看到效果。java開發由初學者一路走來，感觸頗深。開始的時候往往是希望網絡上找到的一個例子按其說明直接保存到本地即可看到效果，只有能看到效果纔會去研究其內部代碼實現，哈哈以後寫blog的時候一定是自己先運行測試可以正常運行，之後再發布。
