本文实例讲述了JavaScript分页功能的实现方法。分享给大家供大家参考。具体实现方法如下：
<script> //定义page为全局变量，以便下面使用 var page; window.onload = function() { var table = document.getElementById("table"); var btnAdd = document.getElementById("btnAdd"); var btnModify = document.getElementById("btnModify"); var btnDel = document.getElementById("btnDel"); var btnRefresh = document.getElementById("btnRefresh"); var headCheck = document.getElementById("headCheck"); //定义每页的页数及初始化table和tbody的id page = new Page(5, 'table', 'sTBodyId'); //初始加载init方法 page.__init__(); //初始更新表格 page.__updateTableRows__(); } //下面的所有方法，均写到window.onload之外，否则运行有问题 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; } //初始化 Page.prototype.__init__ = function() { //获取table引用 this.__oTable__ = document.getElementById(this.tableId); //获取tBody引用 this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId]; //获取tbody的行 this.__dataRows__ = this.__oTBody__.rows; //获取tbody的总行数 this.rowCount = this.__dataRows__.length; try { //判断初始化时每页显示的数据条数，如果定义的值<0或者定义的值>本来就有的行数，那么初始化时显示本来的行数，否则为当前定义的行数 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) { } } //下一页 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() { //pageIndex初始化时为0 //每页显示的数据*当前页的索引 var iCurrentRowCount = this.absolute * this.pageIndex; //如果截止到当前页的所有数据+每页显示的数据>总数据条数，则还需要显示this.absolute+ iCurrentRowCount - this.rowCount这些数据，否则，显示0条数据 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); //将tbody从table中移除 var removedTBody = this.__oTable__.removeChild(this.__oTBody__); //重新创建tbody var newTBody = document.createElement("TBODY"); //给他赋一个id值，为原来的id值 newTBody.setAttribute("id", this.tBodyId); for (var i = iCurrentRowCount; i < this.absolute + iCurrentRowCount - iMoreRow; i++) { //重新给body添加节点 newTBody.appendChild(tempRows[i]); } //将新创建的tbody加到table中 this.__oTable__.appendChild(newTBody); /* this.dataRows为this.oTBody的一个引用， 移除this.oTBody那么this.dataRows引用将销失, code:this.dataRows = tempRows;恢复原始操作行集合. */ this.__dataRows__ = tempRows; this.__oTBody__ = newTBody; } //克隆原始操作行集合 Page.prototype.__cloneRows__ = function() { var tempRows = []; //将当前body中的所有节点及其子节点都克隆一遍 for (var i = 0; i < this.__dataRows__.length; i++) { tempRows[i] = this.__dataRows__[i].cloneNode(1); } return tempRows; } </script> </head> <body> <> <table width="100%" cellpadding="0" cellspacing="0" border="1" > <tr> <td colspan="3" align="center">总共：<%=connDataList.size()%>条记录每页显示5条 <a href="javascript:void(0);">首页</a> <a href="javascript:void(0);">上一页</a> <a href="javascript:void(0);">下一页</a> <a href="javascript:void(0);">尾页</a> <span id="pageindex"></span> </td> </tr> </table> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。