JS 实现table 分页
//js代码 注：数字分页部分可以跟据自己需求更改
function Page(iAbsolute,sTableId,sTBodyId,pageBar)
{
this.absolute = iAbsolute; //每页最大记录数
this.tableId = sTableId;
this.tBodyId = sTBodyId;
//this.tFootId = sTFootId;
this.rowCount = 0;//记录数
this.pageCount = 0;//页数
this.pageIndex = 0;//页索引
this.__oTable__ = null;//表格引用
this.__oTBody__ = null;//要分页内容
this.__oTFoot__ = null;//要分页内容
this.__dataRows__ = 0;//记录行引用
this.__oldTBody__ = null;
this.__init__(); //初始化;
};
/**//*
初始化
*/
Page.prototype.__init__ = function() {
this.__oTable__ = document.getElementById(this.tableId);//获取table引用
this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId];//获取tBody引用
//this.__oTFoot__= document.getElementById(this.tFootId)
oTable =document.getElementById(this.tableId);
this.__dataRows__ = this.__oTBody__.rows;
this.rowCount = this.__dataRows__.length;
try {
this.absolute = (this.absolute <= 0) || (this.absolute>this.rowCount) ? this.rowCount : this.absolute;
this.pageCount = parseInt(this.rowCount%this.absolute == 0
? this.rowCount/this.absolute : this.rowCount/this.absolute+1);
}catch(exception) {}
this.__updateTableRows__();
};
Page.prototype.GetBar=function(obj)
{
var bar= document.getElementById(obj.id);
bar.innerHTML= "每页"+this.absolute+"条/共"+this.rowCount+"条";// 第2页/共6页 首页 上一页 1 2 3 4 5 6 下一页 末页
}
/**//*
下一页
*/
Page.prototype.nextPage = function() {
if(this.pageIndex + 1 < this.pageCount) {
this.pageIndex += 1;
this.__updateTableRows__();
}
//FY();
};
/**//*
上一页
*/
Page.prototype.prePage = function() {
if(this.pageIndex >= 1) {
this.pageIndex -= 1;
this.__updateTableRows__();
}
};
/**//*
首页
*/
Page.prototype.firstPage = function() {
if(this.pageIndex != 0) {
this.pageIndex = 0;
this.__updateTableRows__();
}
};
/**//*
尾页
*/
Page.prototype.lastPage = function() {
if(this.pageIndex+1 != this.pageCount) {
this.pageIndex = this.pageCount - 1;
this.__updateTableRows__();
}
};
/**//*
页定位方法
*/
Page.prototype.aimPage = function(iPageIndex) {
if(iPageIndex > this.pageCount-1) {
this.pageIndex = this.pageCount - 1;
}else if(iPageIndex < 0) {
this.pageIndex = 0;
}else {
this.pageIndex = iPageIndex;
}
this.__updateTableRows__();
};
/**//*
执行分页时，更新显示表格内容
*/
Page.prototype.__updateTableRows__ = function() {
// alert("ok");
var iCurrentRowCount = this.absolute * this.pageIndex;
var iMoreRow = this.absolute+iCurrentRowCount > this.rowCount ? this.absolute+iCurrentRowCount - this.rowCount : 0;
var tempRows = this.__cloneRows__();
//alert(tempRows === this.dataRows);
//alert(this.dataRows.length);
var removedTBody = this.__oTable__.removeChild(this.__oTBody__);
var newTBody = document.createElement("TBODY");
newTBody.setAttribute("id", this.tBodyId);
for(var i=iCurrentRowCount; i < this.absolute+iCurrentRowCount-iMoreRow; i++) {
newTBody.appendChild(tempRows[i]);
}
this.__oTable__.appendChild(newTBody);
//页脚显示分页
var divFood = document.getElementById("divFood");//分页工具栏
divFood.innerHTML="";
var leftDIV = document.createElement("DIV")
leftDIV.setAttribute("display","");
leftDIV.setAttribute("float","left");
var rightDIV = document.createElement("DIV");
rightDIV.setAttribute("display","");
rightDIV.setAttribute("float","left");
var rightBar = document.createElement("DIV");
rightBar.setAttribute("display","");
rightBar.setAttribute("float","left");
rightBar.innerHTML="每页"+this.absolute+"条/共"+this.rowCount+"条"+" 第"+(this.pageIndex+1)+"页/共"+this.pageCount+"页";
var btnFrist =document.createElement("a");
var btnLast =document.createElement("a");
var btnPre =document.createElement("a");
var btnNext =document.createElement("a");
btnFrist.href="javascript:page.firstPage()";
btnFrist.innerHTML= " 首页";
rightBar.appendChild(btnFrist);
btnPre.href="javascript:page.prePage()";
btnPre.innerHTML= " 上一页 ";
rightBar.appendChild(btnPre);
btnNext.href="javascript:page.nextPage()";
btnNext.innerHTML= "下一页";
rightBar.appendChild(btnNext);
btnLast.href="javascript:page.lastPage()";
btnLast.innerHTML= " 末页";
rightBar.appendChild(btnLast);
var fdiv = document.createElement("DIV");
fdiv.setAttribute("display","");
fdiv.setAttribute("float","left");
var ldiv = document.createElement("DIV");
ldiv.setAttribute("display","");
ldiv.setAttribute("float","left");
var pdiv = document.createElement("DIV");
pdiv.setAttribute("display","");
pdiv.setAttribute("float","left");
var ndiv = document.createElement("DIV");
ndiv.setAttribute("display","");
ndiv.setAttribute("float","left");
//div
fdiv.appendChild(btnFrist);
ldiv.appendChild(btnLast);
pdiv.appendChild(btnPre);
ndiv.appendChild(btnNext);
var isOK="Y";
var cssColor="";
divFood.appendChild(rightBar);
divFood.appendChild(fdiv);
divFood.appendChild(pdiv);
//数字排序
for(var i = 0 ; i <this.pageCount;i++)
{
var numIndex="0";
if(this.pageIndex>=9)
{
//if(this.pageIndex<this.pageCount-5)
numIndex = this.pageIndex-5;
if(isOK=="Y")
{
i=parseInt(numIndex)+parseInt(i);
}
isOK="N";
}
if(i<=(4+parseInt(numIndex)))
{
var a=document.createElement("a");
a.href="javascript:page.aimPage("+i+")";
if(i==this.pageIndex)
{
cssColor="red";
}else{
cssColor="";
}
a.innerHTML= " "+"<font color='"+cssColor+"'>"+ parseInt(i+1)+" </font>";
leftDIV.appendChild(a);
}else if(i>=(4+parseInt(numIndex)) && i<(10+parseInt(numIndex)))
{
var a=document.createElement("a");
a.href="javascript:page.aimPage("+i+")";
if(i==this.pageIndex)
{
cssColor="red";
}else{
cssColor="";
}
a.innerHTML= " "+"<font color='"+cssColor+"'>"+ parseInt(i+1)+" </font>"+" ";
rightDIV.appendChild(a);
}
}
divFood.appendChild(leftDIV);
divFood.appendChild(rightDIV);
divFood.appendChild(ndiv);
divFood.appendChild(ldiv);
if(this.pageIndex==0)
{
btnPre.disabled=btnFrist.disabled="disabled";
//alert(btnPre.disabled)
}
if(this.pageCount-1==this.pageIndex)
{
btnLast.disabled=btnNext.disabled="disabled";
}
////页脚显示分页结束
/**//*
this.dataRows为this.oTBody的一个引用，
移除this.oTBody那么this.dataRows引用将销失,
code:this.dataRows = tempRows;恢复原始操作行集合.
*/
this.__dataRows__ = tempRows;
this.__oTBody__ = newTBody;
//alert(this.dataRows.length);
//alert(this.absolute+iCurrentRowCount);
//alert("tempRows:"+tempRows.length);
};
/**//*
克隆原始操作行集合
*/
Page.prototype.__cloneRows__ = function() {
var tempRows = [];
for(var i=0; i<this.__dataRows__.length; i++) {
/**//*
code:this.dataRows[i].cloneNode(param),
param = 1 or true:复制以指定节点发展出去的所有节点,
param = 0 or false:只有指定的节点和它的属性被复制.
*/
tempRows[i] = this.__dataRows__[i].cloneNode(1);
}
return tempRows;
};
//html中调用
<script type="text/javascript" language="javascript">
window.onload = function() {
page = new Page(每页显示行数,tableID,tbodyID); };
</script>
//分页显示栏
<center>
<div align="center" id="divFood" style="width:1000px; height:100px; white-space:nowrap;display:inline;float:center; "></div>
</center>
