JS 實現簡單的Table表格分頁效果（假分頁）
單純的JS實現分頁
先來說說思路：
1.就是 window.onload的時候 呼叫方法 進行主頁的分頁
這裡 要先獲取 表格的總行數 然後在減去 表格 的頭部 和尾部等其他一些 沒有儲存資料的行數
先把所有的資料行根據根據TR的 ID 樣式都調整為 隱藏 （注意 這邊的ID 是連貫格式的 比如 id=“TR1 2 3 。。。。” 這可以適用於一些用C：for 迴圈出來的資料 ）
2.在 根據你所設定的 頁面的大小 pageSize 迴圈顯示出來想要的列
3.根據上面的思路可以 寫一個總的方法 讓 上一頁 或者下一頁 呼叫 根據演算法 算一下要顯示的頁數的條數就好了
下面是JS程式碼
var rowCurrent=1;//當前頁碼
var rowSize=10;//每頁顯示的記錄數
var rows;//總行數
var rowCurrent;//
function accp(id,rowDuo){
var tab = document.getElementById("accp") ;
//表格行數
rows = tab.rows.length ;
document.getElementById("spanCount").innerHTML=rows*1-2;//這是table裡面總行數-不是資料的那兩行的個數 得到是資料的總行數
document.getElementById("spanSize").innerHTML=Math.ceil((rows*1-2)/rowSize);//總頁數
pagez(rowCurrent);
document.getElementById("spanD").innerHTML=rowCurrent;
}
function pagez(rowCurrent1){
for(var i=0;i<(rows*1-2);i++){
var row = document.getElementById("tr"+i) ;
row.style.display="none";
}
var s=1;
for(var i=rowSize*(rowCurrent1-1);i<rowSize*rowCurrent1;i++){
var a=document.getElementById("spanSize").innerHTML*1;
var a1=document.getElementById("spanCount").innerHTML*1%rowSize;
if(rowCurrent1==a){
if(s>a1){
return;
}
s=s+1;
}
var row = document.getElementById("tr"+i) ;
row.style.display="block";
}
}
function page(accp){
if(accp=="X"){
var rowCurrent1=rowCurrent+1;
var a=document.getElementById("spanSize").innerHTML*1;
if(rowCurrent1>a){
alert("已經是最後一頁！");
return;
}else{
rowCurrent=rowCurrent1;
pagez(rowCurrent1);
}
}
if(accp=="S"){
rowCurrent1=rowCurrent-1;
var a=document.getElementById("spanSize").innerHTML*1;
if(rowCurrent1<=0){
alert("已經是首頁了！");
return;
}else{
rowCurrent=rowCurrent1;
pagez(rowCurrent1);
}
}
if(accp=="SO"){
rowCurrent1=1;
rowCurrent=1;
pagez(rowCurrent1);
}
if(accp=="M"){
rowCurrent1=document.getElementById("spanSize").innerHTML*1;
rowCurrent=rowCurrent1;
pagez(rowCurrent1);
}
if(accp=="T"){
var a=document.getElementById("pageno").value*1;//獲取文字框數值
var a1=document.getElementById("spanSize").innerHTML*1;//獲取最大的頁數
if(a>a1){
alert("沒有這麼多頁！");
}else{
rowCurrent1=a;
rowCurrent=a;
pagez(rowCurrent1);
}
}
document.getElementById("spanD").innerHTML=rowCurrent;
document.getElementById("pageno").value=rowCurrent;
}
window.onload=accp;
HTML 程式碼
<table width="100%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="3C556B" style="border-collapse:collapse ">
<tr>
<td height="120" valign="top" bgcolor="ADD4DD">
<table id="accp" width="100%" border="0" align="center" cellpadding="3" cellspacing="1">
<tr align="center" bgcolor="E8F3F9">
<td width="50" height="35" bgcolor="E8F3F9" class="font3">序號</td>
<td><span class="font3">姓名</span></td>
<td><span class="font3">登入名</span></td>
<td><span class="font3">密碼</span></td>
<td><span class="font3">狀態</span></td>
<td><span class="font3">建立時間</span></td>
<td><span class="font3">操作</span></td>
</tr>
<tr id="tr0" class="Bg7" >
<td align="center">1</td>
<td>王武
</td>
<td align="center">wangwu</td>
<td align="center">0xa3c58f914288819fcdb414b7dca66cb9</td>
<td align="center">1</td>
<td align="center">2014-08-19</td>
<td align="center">
<a href="/SpringDemo/user/edit/6"><img style="border:0px" src="/SpringDemo/images/btn_edit.gif" alt="修改" title="修改" ></a>
<a onClick="removeUser(6, '王武')" href="#"><img style="border:0px" src="/SpringDemo/images/btn_delete.gif" lt="刪除" title="刪除" ></a>
</td>
</tr>
<tr id="tr1" class="Bg6">
<td align="center">2</td>
<td>李進
</td>
<td align="center">lijin</td>
<td align="center">0xce0bfd15059b68d67688884d7a3d3e8c</td>
<td align="center">1</td>
<td align="center">2014-08-19</td>
<td align="center">
<a href="/SpringDemo/user/edit/7"><img style="border:0px" src="/SpringDemo/images/btn_edit.gif" alt="修改" title="修改" ></a>
<a onClick="removeUser(7, '李進')" href="#"><img style="border:0px" src="/SpringDemo/images/btn_delete.gif" lt="刪除" title="刪除" ></a>
</td>
</tr>
中間省略一部分程式碼
<tr id="tr20" class="Bg7">
<td align="center">21</td>
<td>武松
</td>
<td align="center">wusong</td>
<td align="center">0x8514f78856814a0cc0773868679bc948</td>
<td align="center">1</td>
<td align="center">2014-08-21</td>
<td align="center">
<a href="/SpringDemo/user/edit/26"><img style="border:0px" src="/SpringDemo/images/btn_edit.gif" alt="修改" title="修改" ></a>
<a onClick="removeUser(26, '武松')" href="#"><img style="border:0px" src="/SpringDemo/images/btn_delete.gif" lt="刪除" title="刪除" ></a>
</td>
</tr>
<tr>
<td align="center" valign="top" height="42" colspan="4">
共<span id="spanCount"></span>條 ，
共<span id="spanD"></span>/<span id="spanSize"></span>頁
<a href="#" onclick="page('SO')">首 頁</a>/
<a href="#" onclick="page('X')">下一頁</a>/
<a href="#" onclick="page('S')">上一頁</a>/
<a href="#" onclick="page('M')">末 頁</a><span id="divFood">
</span>
/第 <input type="text" id="pageno" value="1" style="width:20px"/>頁/
<a href="#" onclick="page('T')">跳轉</a></div>
</td>
<td align="right" height="42" colspan="2">
<img alt="新增使用者"
src="/SpringDemo/images/yh_new.png"
style="cursor:pointer;"
onClick="javascript:location.href='/SpringDemo/user/add';"
height="30" />
</td>
</tr>
</table>
這樣最簡單的JS實現的分頁就好了
下面 我們 來說說 他的缺點 ：
1.不能複用（如果一個頁面有兩個table 那麼 他就要從新寫一個新的JS 不過 還是可以解決的 自己慢慢研究 由於時間的原因我就不研究了）
2.每個ID 都要定義的相當明確 如果漏了一個 就不行了
3. 有些地方程式碼 比較反鎖 （朋友們可以優化一下）
在 頁面的onload方法裡面可以傳值的話 可以傳值 然後定義成一個公共的方法 也不錯
下面是上傳的一個事例