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 相关文章推荐
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
Vue extend的基本用法(实例详解)
Dec 09 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编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
jQuery操作cookie
2016/08/08 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python之re操作方法(详解)
2017/06/14 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
python speech模块的使用方法
2020/09/09 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
最新大学生自我评价
2013/09/24 职场文书
个人评价范文分享
2014/01/11 职场文书
业务部主管岗位职责
2014/01/29 职场文书
可口可乐广告词
2014/03/20 职场文书
教师党员公开承诺书
2014/03/25 职场文书
法定代表人授权委托书
2014/04/04 职场文书
活动总结的格式
2014/05/07 职场文书
花坛标语大全
2014/06/30 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
资金申请报告范文
2015/05/14 职场文书
赞助商致辞
2015/07/30 职场文书
队名及霸气口号大全
2015/12/25 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL