單純的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方法裡面可以傳值的話 可以傳值  然後定義成一個公共的方法 也不錯

下面是上傳的一個事例