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下操作HTML控件的实现代码
Jan 12 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
vue实现公共方法抽离
Jul 31 Javascript
JS函数式编程实现XDM一
Jun 16 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
js控制table合并具体实现
2014/02/20 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
js date 格式化
2017/02/15 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
matplotlib中legend位置调整解析
2017/12/19 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
出生医学证明样本
2014/01/17 职场文书
人事专员职责
2014/02/22 职场文书
年终奖发放方案
2014/06/02 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
Python极值整数的边界探讨分析
2021/09/15 Python