JQuery實現table分頁

1.直接貼代碼：

 var pageSize=2;  //每頁顯示的記錄條數
        var curPage=0;   //顯示第curPage頁
        var len;         //總行數
        var page;        //總頁數
       $(function(){    
        len =$("#show_tab tr").length-1;   //去掉表頭     
        page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根據記錄條數，計算頁數
        console.log(len+"   "+page);
        curPage=1;
        displayPage();//顯示第一頁
      $("#nextpage").click(function(){
          if(curPage<page){
              curPage+=1;
          }
          else{
              alert("yishizuihouyiye");
          }
         displayPage();
         });
      $("#lastpage").click(function(){
          if(curPage>1){
              curPage-=1;
          }
          else{
              alert("yishidiyiye");
          }
          displayPage();
          });
 });
 
 function displayPage(){  
     var begin=(curPage-1)*pageSize;//起始記錄號
     var end = begin + pageSize;
  if(end > len ) end=len;
     $("#show_tab tr").hide();
     $("#show_tab tr").each(function(i){
         if(i-1>=begin && i-1<end)//顯示第page頁的記錄
             {
             $("#show_tab_one").show();
             $(this).show();
             }         
     });

 }

 2.搞了一下午，徹底搞懂了jquery分頁，發現這東西確實很差用，只能控制表面的顯示，就像同窗說的，這都是假的。代碼保存在這裏，封藏。

//table分頁        
        var pageSize=2;  //每頁顯示的記錄條數   
        var curPage=0;   //顯示第curPage頁
        var len;         //總行數
        var page;        //總頁數
       $(function(){    
       len =$("#show_tab tr").length-1;   //去掉表頭     
        page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根據記錄條數，計算頁數
        console.log("len:"+len+"page:"+page);
        document.getElementById("page").value=page;
        curPage=1;
        displayPage();//顯示第一頁
      $("#nextpage").click(function(){//下一頁
          if(curPage<page){
              curPage+=1;
          }
          else{
              alert("yishizuihouyiye");
          }
         displayPage();
         });
      $("#lastpage").click(function(){//上一頁
          if(curPage>1){
              curPage-=1;
          }
          else{
              alert("yishidiyiye");
          }
          displayPage();
          });
      $("#npage").click(function(){//跳到固定某一頁
          var npage=parseInt(document.getElementById("curPage").value);
          if(npage>page||npage<1){
              alert("gaiyebucunzai");
          }
          else{
              curPage=npage;
          }
          displayPage();
          });
 });
 
 function displayPage(){  
     var begin=(curPage-1)*pageSize;//起始記錄號
     var end = begin + pageSize;
     console.log("  begin:"+len+"   end:"+end);
     if(end > len ) end=len;
     $("#show_tab tr").hide();
     $("#show_tab tr").each(function(i){
         if(i-1>=begin && i-1<end)//顯示第page頁的記錄
             {
             $("#show_tab_one").show();
             $(this).show();
             document.getElementById("curPage").value=curPage;
             }         
     });

 }        
 function pageSize2(){
     curPage=0;   //顯示第curPage頁   
     pageSize=parseInt(document.getElementById("pageSize").value);
      len =$("#show_tab tr").length-1;   //去掉表頭     
      page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根據記錄條數，計算頁數
      console.log("len:"+len+"   page:"+page);
      document.getElementById("page").value=page;
      curPage=1;
      displayPage();//顯示第一頁   
 }

3.jsp相關代碼

 <table id="show_tab" cellpadding="4">
       <tr class="trhead" id="show_tab_one">
       <th>學號</th>
       <th>密碼</th>
       <th>姓名</th>
       <th>學院</th>
       <th>專業</th>
       <th>班級</th>
       <th>年級</th>   
       </tr>
       <s:iterator value="list">    
       <tr id="show_tab_tr">     
            <td><s:property value="number"/></td>
            <td><s:property value="password"/></td>
            <td><s:property value="name"/></td>
            <td><s:property value="academy"/></td>
            <td><s:property value="major"/></td>
            <td><s:property value="classs"/></td>
            <td><s:property value="grade"/></td>
            </tr>
            </s:iterator>       
    </table>        
    
    <input id="lastpage" type="button" value="上一頁" >
    <input id="curPage" type="text" size="5">
    <input id="npage" type="button" value="肯定">
    <input id="nextpage" type="button" value="下一頁">
    共<input id="page" type="text" size="1" readonly="readonly" >頁
    
      每頁顯示<input id="pageSize" type="text" value="2" size="5">行<input type="button" value="肯定" onclick="pageSize2()">
    

4.效果截圖