JavaScript分页功能的实现方法


Posted in Javascript onApril 25, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
斜45度寻路实现函数
Aug 20 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
去除html代码里面的script正则方法
May 19 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 #Javascript
JavaScript实现梯形乘法表的方法
Apr 25 #Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 #Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 #Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 #Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 #Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 #Javascript
You might like
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
整理Javascript事件响应学习笔记
2015/12/02 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
解读ES6中class关键字
2017/11/20 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
列举Python中吸引人的一些特性
2015/04/09 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python的pycurl包用法简介
2015/11/13 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
财务副总经理工作职责
2013/11/25 职场文书
生日宴会答谢词
2014/01/09 职场文书
工作决心书范文
2014/03/11 职场文书
公司董事长岗位职责
2014/06/08 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
医院病假条怎么写
2015/08/17 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python