首页 > 代码库 > js完美实现table分页
js完美实现table分页
// 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,sPageId) { 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.pageId = sPageId;//显示当前页数的span的ID this.__init__(); //初始化; };/*初始化*/Page.prototype.__init__ = function () { this.__oTable__ = document.getElementById(this.tableId); //获取table引用 this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId]; //获取tBody引用 this.__pageInnerDiv__ = document.getElementById(this.pageId); 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); document.getElementById(this.pageId).innerHTML = "当前页：" + (this.pageIndex + 1);};/*克隆原始操作行集合*/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> <title></title></head><body> <table id="divtable"> <tbody id="group_one"> <tr> <td> 54898498 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 4684646 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 4987/7874 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 4654985498 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 74987498/ </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 498496496 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> <tr> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> <td> 123213 </td> </tr> </tbody> </table> <span id="s"></span> <a href="#" onclick="page.firstPage();">首页</a> <a href="#" onclick="page.prePage();">上一页</a> <a href="#" onclick="page.nextPage();">下一页</a> <a href="#" onclick="page.lastPage();">尾页</a> <span id="pageindex"></span> <script type="text/javascript"> $(document).ready(function() { page = new Page(3, ‘divtable‘, ‘group_one‘, "pageindex"); }); </script> <script src="JS/JSPager.js" type="text/javascript"></script></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。