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 + "页 " ;
var start = ( this.pageIndex -1 ) * this.pageSize + 1;
var end = start + this.pageSize -1;
if(end > this.rowCount){
end = this.rowCount;
}
span += "显示从" + start +"到" + end + "条 共" + this.rowCount + "条 ";
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);' οnclick='" + this.navPagerObjName + ".numberPage(" + 1 + ")' >首页</a> ";
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 += "... ";
}
for (var i = tempFront; i <= tempBack; i++) {
if (this.pageIndex == i) {
var str = "<font color = 'red'>" + i + "</font> ";
buf += str;
} else {
buf +="<a href='javascript:void(0);' οnclick='" + this.navPagerObjName + ".numberPage(" + i + ")' >" + i +"</a> ";
}
}
if(tempBack < this.pageCount){
buf += "... ";
}
}

span += buf ;
span +="<a href='javascript:void(0);' οnclick='" + this.navPagerObjName + ".numberPage(" + this.pageCount + ")' >尾页</a> ";
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;
}