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 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
原生js实现日期联动
Jan 12 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
前端jquery部分很精彩
May 03 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JS动画效果代码3
2008/04/03 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
Python的Flask框架的简介和安装方法
2015/11/13 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
python 爬取微信文章
2016/01/30 Python
Python探索之自定义实现线程池
2017/10/27 Python
python解析含有重复key的json方法
2019/01/22 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
什么是makefile? 如何编写makefile?
2012/08/08 面试题
技校生自我鉴定
2013/12/08 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
MySQL RC事务隔离的实现
2022/03/31 MySQL