js完美实现table分页
// JavaScript Document
/**
* js分页类
* @param iAbsolute 每页显示记录数
* @param sTableId 分页表格属性ID值，为String
* @param sTBodyId 分页表格TBODY的属性ID值,为String,此项为要分页的主体内容
* @Version 1.0.0
* @author 辛现宝 2007-01-15 created
* var __variable__; private
* function __method__(){};private
*/
function Page(iAbsolute, sTableId, sTBodyId,sPageId) {
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;
this.pageId = sPageId;//显示当前页数的span的ID this.__init__(); //初始化; };
/*
初始化
*/
Page.prototype.__init__ = function () {
this.__oTable__ = document.getElementById(this.tableId); //获取table引用
this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId]; //获取tBody引用
this.__pageInnerDiv__ = document.getElementById(this.pageId);
this.__dataRows__ = this.__oTBody__.rows;
this.rowCount = this.__dataRows__.length;
try {
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) { } this.__updateTableRows__();
};
/*
下一页
*/
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 () {
var iCurrentRowCount = this.absolute * this.pageIndex;
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);
var removedTBody = this.__oTable__.removeChild(this.__oTBody__);
var newTBody = document.createElement("TBODY");
newTBody.setAttribute("id", this.tBodyId); for (var i = iCurrentRowCount; i < this.absolute + iCurrentRowCount - iMoreRow; i++) {
newTBody.appendChild(tempRows[i]);
}
this.__oTable__.appendChild(newTBody);
/*
this.dataRows为this.oTBody的一个引用，
移除this.oTBody那么this.dataRows引用将销失,
code:this.dataRows = tempRows;恢复原始操作行集合.
*/
this.__dataRows__ = tempRows;
this.__oTBody__ = newTBody;
//alert(this.dataRows.length);
//alert(this.absolute+iCurrentRowCount);
//alert("tempRows:"+tempRows.length);
document.getElementById(this.pageId).innerHTML = "当前页：" + (this.pageIndex + 1);
};
/*
克隆原始操作行集合
*/
Page.prototype.__cloneRows__ = function () {
var tempRows = [];
for (var i = 0; i < this.__dataRows__.length; i++) {
/*
code:this.dataRows[i].cloneNode(param),
param = 1 or true:复制以指定节点发展出去的所有节点,
param = 0 or false:只有指定的节点和它的属性被复制.
*/
tempRows[i] = this.__dataRows__[i].cloneNode(1);
}
return tempRows;
};
显示使用例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table id="divtable">
<tbody id="group_one">
<tr>
<td>
54898498
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
4684646
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
4987/7874
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
4654985498
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
74987498/
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
498496496
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
</tbody>
</table>
<span id="s"></span>
<a href="#" onclick="page.firstPage();">首页</a> <a href="#" onclick="page.prePage();">上一页</a> <a href="#" onclick="page.nextPage();">下一页</a> <a href="#" onclick="page.lastPage();">尾页</a> <span id="pageindex"></span>
<script type="text/javascript">
$(document).ready(function() {
page = new Page(3, 'divtable', 'group_one', "pageindex");
}); </script>
<script src="JS/JSPager.js" type="text/javascript"></script>
</body>
</html>
js完美实现table分页的更多相关文章
- 利用js制作html table分页示例(js实现分页)
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...
- html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架
简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...
- 项目总结17-使用layui table分页表格
项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...
- Bootstrap table分页问题汇总
首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...
- Table 分页处理
介绍两种table分页处理:PHP分页 和 js(jquery.table)分页. 一:jquery.table: 1:下载两个文件:table_jui.css 和 jquery.dataTables ...
- bootstrap table分页（前后端两种方式实现）
bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...
- layui table 分页 序号始终从”1“开始解决方法
在用Layui table 分页显示数据,用 type:"numbers" 进行显示序号有以下的问题 1.表格自带的分页,page:true 这种分页,在切换页面的时候序号可以正常 ...
- [转] js实现html table 行，列锁定
js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTM ...
- JQuery实现table分页
1.直接贴代码: ; //每页显示的记录条数 ; //显示第curPage页 var len; //总行数 var page; //总页数 $(function(){ len =$(; //去掉表头 ...
随机推荐
- css3中的新特性经典应用
这篇文章主要分析css3新特性的典型应用,都是干活,没得水分. 1.动画属性:animation. 利用animation可以实现元素的动画效果,他是一个简写属性,用于设置6个动画属性:aminati ...
- Rabbitmq消息队列（一） centos下安装rabbitmq
1.简介 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计.消息中间件主要用于组件之间的解耦,消息的 ...
- Dictionary及KeyValuePair使用
/// <summary> /// 除去数组中的空值和签名参数并以字母a到z的顺序排序 /// </summary> /// <param name="dicA ...
- docker 报错 Error response from daemon: driver failed programming external connectivity on endpoint mynginx
Error response from daemon: driver failed programming external connectivity on endpoint mynginx (7d1 ...
- Hibernate学习之属性级别注解
© 版权声明:本文为博主原创文章,转载请注明出处 属性级别注解 添加方式 1. 写在属性字段上面 2. 写在属性getter方法上面 @Id:必须,定义了映射到数据库表的主键属性,一个实体可以有一个或 ...
- Hibernate学习之类级别注解
© 版权声明:本文为博主原创文章,转载请注明出处 类级别注解: 1. @Entity 实体:表示映射实体类,使用@Entity时必须指定实体类的主键属性 @Entity(name="&quo ...
- MySQL 用户与权限管理
MySQL权限系统的主要功能是证实连接到一台给定主机的用户,而且赋予该用户在数据库上的相关DML,DQL权限.MySQL存取控制包括2个阶段,一是server检查是否同意你连接:二是假定你能连接,se ...
- Apollo配置中心解惑（一）：关于一个portal管理多个环境，要求环境相互之间不影响，独立
关于作者的回答很官方,不太懂: https://github.com/ctripcorp/apollo/wiki/%E5%88%86%E5%B8%83%E5%BC%8F%E9%83%A8%E7%BD% ...
- Ubuntu 16.04 安装opencv的各种方法（含opencv contrib扩展包安装方法）
Ubuntu 16.04 安装opencv的各种方法(含opencv contrib扩展包安装方法) https://blog.csdn.net/ksws0292756/article/details ...
- 2017湘潭赛 A题 Determinant (高斯消元取模)
链接 http://202.197.224.59/OnlineJudge2/index.php/Problem/read/id/1260 今年湘潭的A题 题意不难 大意是把n*(n+1)矩阵去掉某一列 ...