首页 > 代码库 > 一个重构的js分页类

一个重构的js分页类

2024-07-15 18:07:58   222人阅读

// 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;};

例子

<!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="http://www.mamicode.com/#" onclick="page.nextPage();">下一页</a></td>
<td><a href="http://www.mamicode.com/#" onclick="page.prePage();">上一页</a></td>
<td><span id="pageindex"></span></td>
</tr>
</table></body></html>

 


联系
我们