一个js分页类,可把table分页,有实例

最新推荐文章于 2020-01-20 17:26:05 发布

转载最新推荐文章于 2020-01-20 17:26:05 发布 · 255 阅读

文章标签：

#table #function #javascript #exception #xhtml #string

本文介绍了一款基于JavaScript的分页插件实现方法，该插件能够对HTML表格进行分页显示，支持多种页面跳转操作，并提供了一个完整的实例供读者参考。

// 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> <mce:script type="text/javascript" language="javascript"></mce:script> </head> <body> <table id="table1" border="0" width="486"> <thead> <tr style="background-color:#CCCCCC;" mce_style="background-color:#CCCCCC;"> <th style="cursor:pointer;" mce_style="cursor:pointer;">Last Name</th> <th style="cursor:pointer;" mce_style="cursor:pointer;">First Name</th> <th style="cursor:pointer;" mce_style="cursor:pointer;">Birthday</th> <th style="cursor:pointer;" mce_style="cursor:pointer;">Siblings</th> </tr> </thead> <tbody id="group_one"> <tr style="background-color:#f3f3f3" mce_style="background-color:#f3f3f3"> <td>Smith</td> <td>John</td> <td>7/12/1978</td> <td>2</td> </tr> <tr style="background-color:#B4D6FC" mce_style="background-color:#B4D6FC"> <td>Johnson</td> <td>Betty</td> <td>10/15/1977</td> <td>4</td> </tr> <tr style="background-color:#f3f3f3" mce_style="background-color:#f3f3f3"> <td>Henderson</td> <td>Nathan</td> <td>2/25/1949</td> <td>1</td> </tr> <tr style="background-color:#B4D6FC" mce_style="background-color:#B4D6FC"> <td>Williams</td> <td>James</td> <td>7/8/1980</td> <td>4</td> </tr> <tr style="background-color:#f3f3f3" mce_style="background-color:#f3f3f3"> <td>Gilliam</td> <td>Micheal</td> <td>7/22/1949</td> <td>1</td> </tr> <tr style="background-color:#f3f3f3" mce_style="background-color:#f3f3f3"> <td>Smith</td> <td>John</td> <td>7/12/1978</td> <td>2</td> </tr> <tr style="background-color:#B4D6FC" mce_style="background-color:#B4D6FC"> <td>Johnson</td> <td>Betty</td> <td>10/15/1977</td> <td>4</td> </tr> <tr style="background-color:#f3f3f3" mce_style="background-color:#f3f3f3"> <td>Henderson</td> <td>Nathan</td> <td>2/25/1949</td> <td>1</td> </tr> <tr style="background-color:#B4D6FC" mce_style="background-color:#B4D6FC"> <td>Williams</td> <td>James</td> <td>7/8/1980</td> <td>4</td> </tr> <tr style="background-color:#f3f3f3" mce_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="#" mce_href="#" onclick="page.nextPage();">下一页</a></td><td><a href="#" mce_href="#" onclick="page.prePage();">上一页</a></td><td><span id="pageindex"></span></td></tr></table> </body> </html>