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 相关文章推荐
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
JavaScript 原型继承
Dec 26 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 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实现的多彩标签效果代码分享
2014/08/21 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
最基础的Python的socket编程入门教程
2015/04/23 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
internal修饰符起什么作用
2013/12/16 面试题
一年级学生评语大全
2014/04/21 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
python小程序之飘落的银杏
2021/04/17 Python
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
Python合并pdf文件的工具
2021/07/01 Python
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python