JS写分页条

HTML页面代码：
<table>
<tfoot id="tfoot" >
<td  id="tfoottd" colspan="18">
  <span align="left">
      <a  id="pageTotalShow" ></a>

      <select id="sizePerPage" onchange="getTableReport(1)">
          <option  value="10">10</option>
          <option  value="25">25</option>
          <option  value="50">50</option>
      </select>
      条记录每页
  </span>
  <span style="text-align:right;float:right">
    <a href="javascript:void(0);" id="first"  onclick="firstPage()"> </a>
    <a href="javascript:void(0);" id="pre"   onclick="prePage()" > </a>
    <span id="page"></span>
    <a href="javascript:void(0);" id="next" onclick="nextPage()"></a>
    <a href="javascript:void(0);" id="last" onclick="lastPage()"></a>
 </span>
</td>
</tfoot>

</table>

 

 

JS代码：

var pageBean ={};
getTableReport = function(pageNum){
    var pageSize = $("#sizePerPage").val();
    $.ajax({
        url:prefix+"/dataQualityReport",
        data : {pageNum:pageNum,pageSize:pageSize},
        success: function(tableDataInfo){
             pageBean = {
                currentPage:tableDataInfo.pageNum
                 ,totalPage:Math.ceil(tableDataInfo.total / tableDataInfo.pageSize)
                 ,totalCount:tableDataInfo.total
                 ,pageSize:tableDataInfo.pageSize
            };
            pageNumBar(pageBean);
        }
    })
}

pageNumBar = function(pageBean){
             var begainItem = (pageBean.currentPage - 1 ) * pageBean.pageSize ;
    var endItem = pageBean.pageSize;
   if(pageBean.currentPage == pageBean.totalPage) {
       endItem = pageBean.totalCount % pageBean.pageSize;
      if(endItem > 0) {
         endItem = endItem;
      } else{
         endItem = pageBean.pageSize;
      }
   }

    $("#pageTotalShow").html("第 "+(begainItem + 1)+"到 "+(begainItem + endItem)+"条，共 "+pageBean.totalCount+" 条记录。 " );

    $("#next").html('[下一页]').show();
    $("#last").html('[最后一页]').show();
    $("#first").html("[第一页]").show();
    $("#pre").html("[上一页]").show()
    if(pageBean.currentPage >= pageBean.totalPage && pageBean.totalPage >1){
        pageBean.currentPage = pageBean.totalPage
        $("#next").hide();
        $("#last").hide();
    } else if(pageBean.currentPage <= 1){
        pageBean.currentPage = 1;
        $("#first").hide();
        $("#pre").hide();
        if(pageBean.totalPage == 1){
            $("#next").hide();
            $("#last").hide();
        }
    }
    var begain , end ;
    begain = pageBean.currentPage - 5 ;
    if (begain<1) begain = 1 ;
    end = begain + 9;
    if(end > pageBean.totalPage ) {
        end = pageBean.totalPage;
    }
    begain = end -9 ;
    if (begain<1) begain = 1 ;
    var html = "";
    var iShow;
    for (var i = begain ; i <= end ; i++) {
        iShow = i < 10 ? '0'+ i : i;
        if (i == pageBean.currentPage) {
            html += "<button disabled = 'disabled'>&nbsp;[" + iShow + "]&nbsp;</button>"
        }else{
            html += "<a href='javascript:void(0);' onclick='getTableReport("+ i + ")'>&nbsp;[" + iShow + "]&nbsp;</a>" ;
        }
    }
    $("#page").html(html);
}

prePage = function(){
    getTableReport(pageBean.currentPage-1)
}
nextPage = function  (){
    getTableReport(pageBean.currentPage+1)
}
firstPage = function(){
    getTableReport(1)
}
lastPage = function  (){
    getTableReport(pageBean.totalPage)
}