function Page(iAbsolute,sTableId,sTBodyId,pageBar){
this.absolute = iAbsolute; //每页最大记录数
this.tableId = sTableId;
this.tBodyId = sTBodyId;
this.pageBar = pageBar;
//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)
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() {
var iCurrentRowCount = this.absolute * this.pageIndex;
var iMoreRow = this.absolute + iCurrentRowCount > this.rowCount ? this.absolute + iCurrentRowCount - this.rowCount : 0;
var tempRows = this.__cloneRows__();
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 pageBar = document.getElementById(this.pageBar);//分页工具栏
pageBar.innerHTML = "";
var leftBar = document.createElement("div"),cur;
leftBar.className = 'leftBar';
cur = this.pageIndex * this.absolute + ' 到 ' + (this.pageIndex + 1) * this.pageCount;
if(this.pageIndex === 0){
cur = ' 1 到 ' + this.absolute;
}
if(this.pageIndex === this.pageCount - 1){
cur = this.pageIndex * this.absolute + ' 到 ' + this.rowCount;
}
leftBar.innerHTML = "当前显示 " + cur + " 条,共 " + this.rowCount + " 条记录";
var rightBar = document.createElement('div');
rightBar.className = 'rightBar';
var btnPre = document.createElement("a");
var btnNext = document.createElement("a");
btnPre.className = 'button-left';
btnPre.title = '上一页';
btnPre.href = "javascript:page.prePage()";
btnPre.innerHTML = '<span class="prev"></span>';
rightBar.appendChild(btnPre);
btnNext.className = 'button-right';
btnNext.title = '下一页';
btnNext.href = "javascript:page.nextPage()";
btnNext.innerHTML = '<span class="next"></span>';
rightBar.appendChild(btnNext);
pageBar.appendChild(leftBar);
pageBar.appendChild(rightBar);
if(this.pageIndex == 0){
btnPre.disabled = "disabled";
btnPre.style.cursor = 'default';
}
if(this.pageCount - 1 == this.pageIndex){
btnNext.disabled = "disabled";
btnNext.style.cursor = 'default';
}
////页脚显示分页结束
/**
this.dataRows为this.oTBody的一个引用,
移除this.oTBody那么this.dataRows引用将销失,
code:this.dataRows = tempRows;恢复原始操作行集合.
*/
this.__dataRows__ = tempRows;
this.__oTBody__ = newTBody;
};
/**
* 克隆原始操作行集合
*/
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;
};
?
详细解决方案
javascript 兑现table分页
热度:311 发布时间:2012-08-24 10:00:21.0
相关解决方案
- javascript ie6兼容的有关问题
- javascript window open在ie中设立不起作用,求解决
- 不走"<script type='text/javascript'>"标签咋回事
- <script type="javascript/text">的有关问题
- 用servlet+jsp+javascript+jdbc做个简单的办公自动化系统流程,该如何解决
- javaScript = == ===区别,该怎么解决
- javascript 怎么验证name=xx.xx的radio表单
- javascript,该怎么处理
- javascript,该如何处理
- javascript 选中文字 但是保存样式 标签
- 新人求问,J2EE方向,html,css,javascript,vml要学到什么程度?解决思路
- javascript 请求servlet兑现将函数中定义的变量作为参数
- jsp页面中加了<table>元素后,页面出现了一大片空白后才出现表格?解决方法
- javascript 不懂,该如何处理
- jsp页面中加了<table>元素后,页面出现了一大片空缺后才出现表格
- javascript 不懂解决方法
- JavaScript 大局函数求实例,高分求
- javaScript 里面 如何知道Object 对象的长度
- javascript 中文本框中数字如何比较
- javascript IE通过,火狐,google浏览器不过解决思路
- Unknown table 'book' in field list
- VS2010 RDLC 报表 表(table) 分页的时候怎么显示表头
- Chrome Javascript Click 事件,该如何解决
- javascript 绑定服务器控件 事件,该如何解决
- javascript 经过加密压缩 怎么解压缩
- JavaScript 怎么获取Table中的某个<span> 的值
- Table 布局怎么改用CSS定位
- javascript 正则表达式 请用小写字母和数目字,首字母必须为字母,长度5-15
- sql清空表数据用truncate table 表名处理,若表名是以数字开头,或者完全是数字,这句会报语法异常
- 大哥们救上命啊ArgumentException: 列“xxx”不属于表 Table