一个js分页类,可把table分页,有实例
来源:互联网 发布:sms地表水软件下载 编辑:程序博客网 时间:2024/04/29 15:37
一个js分页类,可把table分页,有实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">...
window.onload = function()...{
page = new Page(3,'table1','group_one'); };
</script>
</head>
<body>
<table id="table1" border="0" width="486">
<thead>
<tr style="background-color:#CCCCCC;">
<th style="cursor:pointer;">Last Name</th>
<th style="cursor:pointer;">First Name</th>
<th style="cursor:pointer;">Birthday</th>
<th style="cursor:pointer;">Siblings</th>
</tr>
</thead>
<tbody id="group_one">
<tr style="background-color:#f3f3f3">
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr style="background-color:#B4D6FC">
<td>Johnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr style="background-color:#B4D6FC">
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Gilliam</td>
<td>Micheal</td>
<td>7/22/1949</td>
<td>1</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr style="background-color:#B4D6FC">
<td>Johnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr style="background-color:#B4D6FC">
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Gilliam</td>
<td>Micheal</td>
<td>7/22/1949</td>
<td>1</td>
</tr>
</tbody>
</table>
<span id="s"></span>
<table><tr><td><a href="#" onclick="page.nextPage();">下一页</a></td><td><a href="#" onclick="page.prePage();">上一页</a></td><td><span id="pageindex"></span></td></tr></table>
</body>
</html>
新一篇: js实现网页局部打印
// JavaScript Document
/**//**
* js分页类
* @param iAbsolute 每页显示记录数
* @param sTableId 分页表格属性ID值,为String
* @param sTBodyId 分页表格TBODY的属性ID值,为String,此项为要分页的主体内容
* @Version 1.0.0
* @author 辛现宝 2007-01-15 created
* var __variable__; private
* function __method__(){};private
*/
function Page(iAbsolute,sTableId,sTBodyId)
...{
this.absolute = iAbsolute; //每页最大记录数
this.tableId = sTableId;
this.tBodyId = sTBodyId;
this.rowCount = 0;//记录数
this.pageCount = 0;//页数
this.pageIndex = 0;//页索引
this.__oTable__ = null;//表格引用
this.__oTBody__ = 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.__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.nextPage = function()...{
if(this.pageIndex + 1 < this.pageCount)...{
this.pageIndex += 1;
this.__updateTableRows__();
}
};
/**//*
上一页
*/
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()...{
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);
/**//*
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;
};
/**//**
* js分页类
* @param iAbsolute 每页显示记录数
* @param sTableId 分页表格属性ID值,为String
* @param sTBodyId 分页表格TBODY的属性ID值,为String,此项为要分页的主体内容
* @Version 1.0.0
* @author 辛现宝 2007-01-15 created
* var __variable__; private
* function __method__(){};private
*/
function Page(iAbsolute,sTableId,sTBodyId)
...{
this.absolute = iAbsolute; //每页最大记录数
this.tableId = sTableId;
this.tBodyId = sTBodyId;
this.rowCount = 0;//记录数
this.pageCount = 0;//页数
this.pageIndex = 0;//页索引
this.__oTable__ = null;//表格引用
this.__oTBody__ = 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.__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.nextPage = function()...{
if(this.pageIndex + 1 < this.pageCount)...{
this.pageIndex += 1;
this.__updateTableRows__();
}
};
/**//*
上一页
*/
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()...{
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);
/**//*
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;
};
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">...
window.onload = function()...{
page = new Page(3,'table1','group_one'); };
</script>
</head>
<body>
<table id="table1" border="0" width="486">
<thead>
<tr style="background-color:#CCCCCC;">
<th style="cursor:pointer;">Last Name</th>
<th style="cursor:pointer;">First Name</th>
<th style="cursor:pointer;">Birthday</th>
<th style="cursor:pointer;">Siblings</th>
</tr>
</thead>
<tbody id="group_one">
<tr style="background-color:#f3f3f3">
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr style="background-color:#B4D6FC">
<td>Johnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr style="background-color:#B4D6FC">
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Gilliam</td>
<td>Micheal</td>
<td>7/22/1949</td>
<td>1</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr style="background-color:#B4D6FC">
<td>Johnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr style="background-color:#B4D6FC">
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Gilliam</td>
<td>Micheal</td>
<td>7/22/1949</td>
<td>1</td>
</tr>
</tbody>
</table>
<span id="s"></span>
<table><tr><td><a href="#" onclick="page.nextPage();">下一页</a></td><td><a href="#" onclick="page.prePage();">上一页</a></td><td><span id="pageindex"></span></td></tr></table>
</body>
</html>
发表于 @ 2008年03月20日 17:37:00|评论(0)|编辑
旧一篇: 一些好的代码,收集
- 一个js分页类,可把table分页,有实例
- 一个js分页类,可把table分页,有实例
- 一个js分页类,可把table分页,有实例
- 一个js分页类,可把table分页,有实例
- 可排序分页的table
- js分页实例
- js 实现 table 伪分页
- js 实现table 分页功能
- 利用js制作html table分页示例(js实现分页)
- 利用js制作html table分页示例(js实现分页)
- 共享一个JS分页处理类(4)
- 共享一个JS分页处理类(5)
- bootstrap-table表格客户端分页实例
- easyui-table表格客户端分页实例
- vue.js 分页查询实例
- JS对列表的分页 和 Table的分页
- 一个简单分页的实例
- 一个简单的分页实例
- 单元测试中NUnit和DotNetMock的使用调研报告
- GNU/Linux中解决多线程互斥同步问题
- 沉痛哀悼那些在地震中逝去的人们
- 一个js分页类,可把table分页,有实例
- IBM新文化的8个原则
- 一个js分页类,可把table分页,有实例
- Ubuntu内核卸载
- java 调用 delphi编写的dll
- 第一天开通!
- 2008年5月19日14:28,Java非技术版祝福分的汇总
- 三个曾经的动画站项目经历(二)
- [转]全国停止一切娱乐活动 文化部将督查娱乐活动禁止情况
- java 如何生成动态的gif图片
- 数据海量分页存储过程(1)