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 相关文章推荐
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
JS实现拖动模糊框特效
Aug 25 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
解析thinkphp中的导入文件标签
2013/06/20 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
分享6个隐藏的python功能
2017/12/07 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
Delphi笔试题
2016/11/14 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
老师对学生的寄语
2014/04/09 职场文书
初中班主任评语
2014/04/24 职场文书
诉前财产保全担保书
2014/05/20 职场文书
分居协议书范本
2014/11/03 职场文书
入党现实表现材料
2014/12/23 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
Django实现聊天机器人
2021/05/31 Python
Python预测分词的实现
2021/06/18 Python
Go语言并发编程 sync.Once
2021/10/16 Golang
docker-compose部署Yapi的方法
2022/04/08 Servers