经典JavaScript分页代码

最新推荐文章于 2023-02-23 10:35:30 发布

Creating

最新推荐文章于 2023-02-23 10:35:30 发布

阅读量8.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript function class border exception table

本文链接：https://blog.csdn.net/solidwang/article/details/5416431

本文介绍了一款基于JavaScript的简单分页插件实现方法，该插件通过修改DOM元素来实现分页效果，适用于表格数据展示场景。文章提供了详细的代码示例及使用说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/* js分页类

* @param iAbsolute 每页显示记录数

* @param sTableId 分页表格属性ID值，为String

* @param sTBodyId 分页表格TBODY的属性ID值,为String,此项为要分页的主体内容

//页面初始化

function init() {

page = new Page(100,'tableList','group_one');

}

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++) {

tempRows[i] = this.__dataRows__[i].cloneNode(1);

}

return tempRows;

}

应用举例：

<thead>

</tr>

<thead>

for(int i=0; i<totalSize; i++) {

CardInfoBean bean = (CardInfoBean)allList.get(i);

<tr>

<%=bean.getCard_id() %>

</td>

<%=bean.getOwner() %>

</td>

<%=bean.getStatus() %>

</td>

</tr>

}

</tbody>

</table>

<tr>

总共：<%=totalSize%>条记录 每页显示100条 

</td>

</tr>

</table>