利用jQuery實現表格的分頁效果

新建一個Table，添加十行數據

    <table cellspacing="0">  
      <thead>  
        <tr>  
          <th>編號</th>  
          <th>姓名</th>  
          <th>性別</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr>  
          <td>1</td>  
          <td>張飛</td>  
          <td>男</td>  
        </tr>  
        <tr>  
          <td>2</td>  
          <td>劉備</td>  
          <td>男</td>  
        </tr>  
        <tr>  
          <td>3</td>  
          <td>關羽</td>  
          <td>男</td>  
        </tr>  
        <tr>  
          <td>4</td>  
          <td>妲己</td>  
          <td>女</td>  
        </tr>  
        <tr>  
          <td>5</td>  
          <td>后羿</td>  
          <td>男</td>  
        </tr>  
        <tr>  
          <td>6</td>  
          <td>大喬</td>  
          <td>女</td>  
        </tr>  
        <tr>  
          <td>7</td>  
          <td>露娜</td>  
          <td>女</td>  
        </tr>  
        <tr>  
          <td>8</td>  
          <td>E.Z</td>  
          <td>男</td>  
        </tr>  
        <tr>  
          <td>9</td>  
          <td>琴女</td>  
          <td>女</td>  
        </tr>  
        <tr>  
          <td>10</td>  
          <td>貂蟬</td>  
          <td>女</td>  
        </tr>  
      </tbody>  
      
    </table>  

2.引入jQuery 及script 代碼

    <script src="jquery-1.11.1.js"></script>  
    <script>  
      $(function(){  
         var $table = $('table');  
         var currentPage = 0;//當前頁默認值為0  
         var pageSize = 3;//每一頁顯示的數目  
         $table.bind('paging',function(){  
             $table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show();  
         });       
         var sumRows = $table.find('tbody tr').length;  
         var sumPages = Math.ceil(sumRows/pageSize);//總頁數  
           
         var $pager = $('<div class="page"></div>');  //新建div，放入a標簽,顯示底部分頁碼  
         for(var pageIndex = 0 ; pageIndex<sumPages ; pageIndex++){  
             $('<a href="#" id="pageStyle" onclick="changCss(this)"><span>'+(pageIndex+1)+'</span></a>').bind("click",{"newPage":pageIndex},function(event){  
                 currentPage = event.data["newPage"];  
                 $table.trigger("paging");  
                   //觸發分頁函數  
                 }).appendTo($pager);  
                 $pager.append(" ");  
             }     
             $pager.insertAfter($table);  
             $table.trigger("paging");  
               
             //默認第一頁的a標簽效果  
             var $pagess = $('#pageStyle');  
             $pagess[0].style.backgroundColor="#006B00";  
             $pagess[0].style.color="#ffffff";  
    });  
      
    //a鏈接點擊變色，再點其他回復原色  
      function changCss(obj){  
        var arr = document.getElementsByTagName("a");  
        for(var i=0;i<arr.length;i++){     
         if(obj==arr[i]){       //當前頁樣式  
          obj.style.backgroundColor="#006B00";  
          obj.style.color="#ffffff";  
        }  
         else  
         {  
           arr[i].style.color="";  
           arr[i].style.backgroundColor="";  
         }  
        }  
     }      
    </script>  

3.表格和底部分頁碼的CSS樣式

    <style>  
     table{  
         width:600px;  
         text-align:center;  
         }  
     table tr th,td{  
         height:30px;  
         line-height:30px;  
         border:1px solid #ccc;  
         }  
      #pageStyle{  
         display:inline-block;  
         width:32px;  
         height:32px;  
         border:1px solid #CCC;  
         line-height:32px;  
         text-align:center;  
         color:#999;  
         margin-top:20px;  
         text-decoration:none;  
      
         }  
      #pageStyle:hover{  
          background-color:#CCC;  
          }  
      #pageStyle .active{  
          background-color:#0CF;  
          color:#ffffff;  
          }        
    </style>  

4.瀏覽器調試

原文鏈接：http://blog.csdn.net/chauncywu/article/details/59116693?utm_source=itdadao&utm_medium=referral