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 =$(; //去掉表头 ...
随机推荐
- 安装Linux centos 时编辑选项
将第上一步选择编辑之后出来的文字修改为:>vmlinuz initrd=initrd.img linux dd quiet 这里注意了:网上很多文章都说这一步改成“>vmlinuz ini ...
- zabbix监控第二块网卡是否连通
配置zabbix客户端配置文件 vim /etc/zabbix/zabbix_agentd.conf 添加 Include=/etc/zabbix/zabbix_agentd.d/ 添加脚本检测网卡 ...
- iOS应用程序开发之内购
内购简介 配置iTunes Connect iOS客户端开发工作 一.内购简介 1⃣️通过苹果应用程序商店有三种主要赚钱的方式: –直接收费(与国内大部分用户的消费习惯相悖,如果直接收费,不要设置为6 ...
- 排序算法 C++代码实现
插入排序: 就像摸牌,摸一张插进去,找一个哨兵.从第二个開始,和前一个比較.小的话前移一位. #include <iostream> #include<stdlib.h> us ...
- idea新建项目打包 ，运行jar，并放入maven仓库
1.新建项目(转自:http://www.cnblogs.com/wql025/p/5215570.html) 创建一个新Maven项目 new 一个project 不选择任何Maven模板 起个Gr ...
- Arcgis：坐标系统极其转换
1. ArcGIS中的坐标系统 ArcGIS中预定义了两套坐标系统,地理坐标系(Geographic coordinate system)和投影坐标系(Projectedcoordinate syst ...
- Java IO 常用类简介
字节流 输入字节流 InputStream输入字节流的抽象类 ByteArrayInputStreambyte数组输入流 FileInputStream文件输入流 PipedInputStream管道 ...
- which 命令
我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which 查看可执行文件的位置. whereis 查看文件的位置. ...
- WebSocket和SocketIO总结
1.WebSocket是什么? WebScoket是一种让客户端和服务器之间能进行双向实时通信的技术.它是HTML最新标准HTML5的一个协议规范,本质上是个基于TCP的协议,它通过HTTP/HTTP ...
- PHP SOCKET编程 .
1. 预备知识 一直以来很少看到有多少人使用php的socket模块来做一些事情,大概大家都把它定位在脚本语言的范畴内吧,但是其实php的socket模块可以做很多事情,包括做ftplist,http ...