核心产品
帮助中心
时间：2021-05-26
本文实例讲述了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的idpage = 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__);//重新创建tbodyvar 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__ = 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"style="padding: 2"><tr><td colspan="3" align="center">总共：<%=connDataList.size()%>条记录 每页显示5条 <a href="javascript:void(0);"onclick="page.firstPage();return false;">首页</a> <ahref="javascript:void(0);" onclick="page.prePage();return false;">上一页</a><a href="javascript:void(0);"onclick="page.nextPage();return false;">下一页</a> <ahref="javascript:void(0);" onclick="page.lastPage();return false;">尾页</a><span id="pageindex"></span></td></tr></table></body></html>希望本文所述对大家的javascript程序设计有所帮助。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。
本文实例讲述了JavaScript仿静态分页实现方法。分享给大家供大家参考。具体如下：这里基于JavaScript模仿网页不刷新静态分页的功能，实际用的时候估计
本文实例为大家分享了javascript实现前端分页效果的具体代码，供大家参考，具体内容如下需求：实现分页请求表格数据，ajax暂时没写，只写了分页的功能。效果
网页的分页功能的实现比较简单，实现方法也多种多样。今天总结一个简单的Jsp真分页实例。首先，提到分页就要先明确一个概念，何为真分页何谓假分页。假分页:一次性从数
本文实例讲述了JSP实现添加功能和分页显示的方法。分享给大家供大家参考。具体如下：学习目标：①进一步掌握MVC设计模式；②掌握添加功能的实现；③掌握分页显示功能
织梦dedecsm模板中首页如何实现分页的三种方法有时在做织梦模板的时候需要实现首页分页效果，但是织梦本身首页是不带分页功能的，那如何实现织梦首页分页呢？有3种
