标签：JavaScript,分页
本文实例讲述了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"
style="padding: 2">
<tr>
<td colspan="3" align="center">总共：<％=connDataList.size()％>条记录 每页显示5条
<a href="javascript:void(0);"
onclick="page.firstPage();return false;">首页</a> <a
href="javascript:void(0);" onclick="page.prePage();return false;">上一页</a>
<a href="javascript:void(0);"
onclick="page.nextPage();return false;">下一页</a> <a
href="javascript:void(0);" onclick="page.lastPage();return false;">尾页</a>
<span id="pageindex"></span>
</td>
</tr>
</table>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
0
投稿猜你喜欢
2.1数据的爬取代码：import pandas as pddata=pd.read_csv("example_data.csv&- 大家好，我是海拥，在今天的博客中，我们将讨论 Python 中简化代码的技巧。我清楚地记得当我选择学习 python 时，最令我震惊的是它的
- 最近在做一个电信的MIS系统，由于数据库的数据量庞大（最少也有500万），发现了一个sql server 长时间占有内存的现象。当你查询数据
- queue分类python3 queue分三类：先进先出队列后进先出的栈优先级队列他们的导入方式分别是：from queue import
- vue配置文件vue.config.js配置前端代理将此代码片段命名为 vue.config.js,放在项目根目录即可仅需修改target属
- 在项目中开始使用vue2来构建项目了，跟 vue1 很大的一处不同在于2 取消了props 的双向绑定，改成只能从父级传到子级的单向数据流，
- 本文实例讲述了mysql数据库创建账号、授权、数据导出、导入操作。分享给大家供大家参考，具体如下：1、账号创建及授权grant all pr
- 本文测试环境：CentOS 7 64-bit Minimal MySQL 5.7配置 yum 源在 https://dev.mysql.co
- 问题描述我是debain 系的linux系统没遇到这个问题,在centos系统遇到的Collecting dlib Downlo
- 前言在前端编程中，事件的应用十分广泛，DOM上的各种事件。在Ajax大规模应用之后，异步请求更得到广泛的认同，而Ajax亦是基于事件机制的。
- 从这里开始我的博客，后台数据库是什么？没错，就是MySQL，服务器端使用的脚本就是PHP，整个框架使用的是WordPress。PHP和MyS
- 目标：目标文件为一个float32型存储的二进制文件，按列优先方式存储。本文使用Python读取该二进制文件并使用matplotlib.py
- Vue 3.2 引入了语法，这是一种稍微不那么冗长的声明组件的方式。您可以通过向 SFC 的元素添加属性来启用它，然后可以删除组件中的一些样
- 新建一个lvm磁盘，这里我建的lv为mydatalv，挂载到了/data下[root@localhost ~]# lvs LV
- 环境Win10Python3.6.6Django2.1.3中间件作用 中间件用于全局修改Django的输入或输出。中间件常见用途 缓存会话认
- 如：获得 2015-03-01 日的前7天的日期 ： select date_sub('2015-03-01',interv
- 有时候需要对有角度的矩形框内图像从原图片中分割出来。这里的程序思想是，先将图片进行矩形角度的旋转，使有角度的矩形处于水平状态后，根据原来坐标
- 本文实例讲述了python网络编程：socketserver的基本使用方法。分享给大家供大家参考，具体如下：本文内容：socketserve
- 在我们有时需要迁移或部署项目时，需要知道项目所依赖的三方包和版本，下面就来一看一看该如何获取吧：1、首先安装pipreqs库使用pip命令，
- 首先要注册一个账号密码，通过账号密码登录，并且滑块验证，自动输入搜索关键词，进行跳转翻页爬取数据，并保存到Excel文件中。代码运行时，滑块
