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 =$(; //去掉表头 ...
随机推荐
- Yii 获得当前控制器和方法
[怎样获得当前控制器和方法] 控制器:$this -> id ; 方法:$this->action->id ; 这主要是用在视图中,进行高亮显示. <div id=" ...
- 【Excle数据透视表】如何重复显示行字段的项目标签
前提:该数据透视表以表格形式显示 解决办法: 通过报表布局设置"重复所有项目标签" 修改前样式 步骤 单击数据透视表中任意单元格→设计→报表布局→重复所有项目标签 修改后样式
- 文件json
import jsondef op_data(filename,dic=None): if dic:#写入进去 with open(filename,'w',encoding='utf-8') as ...
- 设置DevExpress GridControl控件时间列显示时、分、秒样式
如题,如果Dev GridControl控件绑定DataTable数据源时,DataTable中的某一列为Date类型时,GridControl默认显示样式只显示当前日期,并不会将时.分.秒显示出来. ...
- ASP.NET CORE RAZOR ：向 Razor 页面添加验证
https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/razor-pages/validation 本部分中向 Movie 模型添加了验证逻辑. ...
- 防火墙firewall的设置和查看
systemctl start firewalld.service # 开启防火墙firewallsystemctl stop firewalld.service # 停止防火墙firewall sy ...
- SpringBoot使用MyBatis报错：Error invoking SqlProvider method (tk.mybatis.mapper.provider.base.BaseInsertProvider.dynamicSQL)
© 版权声明:本文为博主原创文章,转载请注明出处 1. 错误描述 使用SpringBoot集成MyBatis框架,并且使用 mapper-spring-boot-starter 自动生成MyBati ...
- MySQL中in（常量列表）的执行计划
我们在写sql的时候,经常用到in,in后面跟一堆常量列表,如id.有人说in的效率很高,而有人说很低:有人说in能使用索引,还有人说in不能使用索引... 到底是一个怎样的情况呢?我们分析以下几种情 ...
- 系统服务-----NotificationManager
熟悉api事例笔记: package com.test; import com.example.test.R; import android.app.Activity; import android. ...
- /var/log目录下的Linux日志文件功能详解_转
摘自:http://www.niaoyun.com/help/application/386.html 学习linux应该知道日志文件的所在位置以及它们包含的内容,在系统运行正常的情况下学习了解这些不 ...