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="#" ;
                }
            }
        }      
    </script>