js端 分页导航条

有些情况 界面一次性加载完所有数据，table 列表的形式展示：
对于这样的情况有时候需要用js将这些数据进行分页显示。

下面的js实现的就是纯js 分页条。
/**  
* 纯js端分页导航条  
* @verson v2.0  
* @param {} tableId        数据grid table id
* @param {} pageIndex      前页码
* @param {} navPagerObjName 此对象在页面上的变量全名
* @param {} pageSize       每页显示的记录条数
* @param {} pagerId        显示分页条的 div 或者 span id
*/
function NavPager(tableId,pagerId,navPagerObjName,pageSize,rangeSize){
this.pageIndex = 1;
this.pageSize = pageSize | 10;
this.rangeSize = rangeSize | 3;
this.pageCount = 0;
this.tableId = tableId;
this.pagerId = pagerId;
this.navPagerObjName = navPagerObjName ;
this.tableObj = document.getElementById(this.tableId);//tablegrid object
var tmp =  this.tableObj.getElementsByTagName("tbody");
this.pageBarClass = "pageBar";//css
this.rowcss = "row";
this.rowcss_0 = this.rowcss + "0";
this.rowcss_1 = this.rowcss + "1";

if(!tmp || tmp.length<1){
return;
}
if(isNaN(this.pageSize) || this.pageSize < 1){
this.pageSize = 10;
}
this.oldBody = tmp[0];//table tbody object
var rows = this.oldBody.getElementsByTagName("tr");// tr rows
this.dataRows = [];
for(var i=0,count=rows.length;i<count;i++){
this.dataRows[i] = rows[i].cloneNode(1);
}
this.rowCount = this.dataRows.length;
if(this.rowCount <=this.pageSize){
$("#" + pagerId).hide();
return;
}
this.pageCount = parseInt((this.rowCount + 1) /this.pageSize);
if(isNaN(this.curPage) || this.curPage < 1){
this.curPage = 1;
}
this.updateTableRows();
}

/**
* 更新表格数据以及分页导航条
*/
NavPager.prototype.updateTableRows = function(){
var start = (this.pageIndex -1) * this.pageSize;
var end = start + this.pageSize -1;
if(end >= this.rowCount){
end = this.rowCount -1;
}
var tmpRows = this.cloneDataRows();
this.tableObj.removeChild(this.oldBody);
var newBody = document.createElement("tbody");
for(var i=start;i<=end;i++){
var row = tmpRows[i];
$(row).removeClass(this.rowcss_0);
$(row).removeClass(this.rowcss_1);
$(row).addClass(this.rowcss + (i % 2));
newBody.appendChild(row);
}
this.oldBody = newBody;
this.tableObj.appendChild(newBody);
var preHtml = this.getPreBar();
var lastHtml = this.getpostBar();
var html = "<table style='width:100%;' border='0px'><tr><td align='left'>";
html += preHtml;
html += "</td><td align='right'>";
html += lastHtml;
html += "</td></tr></table>";
$("#" + this.pagerId).html(html);
$("#" + this.pagerId).show();
}

/**
* 跳转到指定的页
*/
NavPager.prototype.numberPage = function(curPage){
this.pageIndex = curPage;
if((this.pageIndex - 1) * this.pageSize > this.rowCount){
this.pageIndex = 1;
}
this.updateTableRows();
}

/**
* 获取分页条前部分html内容
*/
NavPager.prototype.getPreBar = function(){
var span = "<span style='width:100%;text-align:left;margin-left:2px;'>";
span +=  this.pageIndex + "/" + this.pageCount + "页&nbsp;" ;
var start = ( this.pageIndex -1 ) * this.pageSize + 1;
var end = start + this.pageSize -1;
if(end > this.rowCount){
end = this.rowCount;
}
span += "显示从" + start +"到" + end + "条&nbsp;共" + this.rowCount + "条&nbsp;";
span += "</span>";
return span;
}

/**
* 获取分页条后部分html内容
*/
NavPager.prototype.getpostBar = function(){
var span = "<span style='width:100%;text-align:right;margin-left:2px;'>";
span +="<a href='javascript:void(0);' onclick='" + this.navPagerObjName + ".numberPage(" + 1 + ")' >首页</a>&nbsp;";
var front = this.pageIndex - this.rangeSize;
var back  = this.pageIndex + this.rangeSize;
var buf = "";
// 如果当前页是5,前面一截就是234,后面一截就是678      
    if (this.pageCount > 1) {      
        var tempBack = this.pageCount;      
        var tempFront = 1;      
        if (back < this.pageCount){      
            tempBack = back;  
}
        if (front > 1){      
            tempFront = front;      
}
if(tempFront > 1){
buf += "...&nbsp;";
}
        for (var i = tempFront; i <= tempBack; i++) {      
            if (this.pageIndex == i) {      
                var str = "<font color = 'red'>" + i + "</font>&nbsp;";      
                buf += str;      
            } else {      
            buf +="<a href='javascript:void(0);' onclick='" + this.navPagerObjName + ".numberPage(" + i + ")' >" + i +"</a>&nbsp;";
            }      
        }
if(tempBack < this.pageCount){
buf += "...&nbsp;";
}
    }

span += buf ;
span +="<a href='javascript:void(0);' onclick='" + this.navPagerObjName + ".numberPage(" + this.pageCount + ")' >尾页</a>&nbsp;";
span += "</span>";
return span;
}

/**
* 克隆数据
* @returns {Array}
*/
NavPager.prototype.cloneDataRows = function(){
var rows = [];
for(var i=0,count=this.dataRows.length;i<count;i++){
rows[i] = this.dataRows[i].cloneNode(1);
}
return rows;
}