javascript實現Html Table數據表分頁

 直接調用：

<style type="text/css">  
         th
         {
             font-size:18px;
             }
         td
         {
             font-size:15px;
             }
     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;  
          }        
         .style1
         {
             font-size: 12pt;
         }
    </style> 

 

<script type="text/javascript">
    //分頁顯示
        $(function () {
            var $table = $("table");
            var currentPage = 0; //當前頁默認值為0  
            var pageSize = 12; //每一頁顯示的數目  
            $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>