html实现表格分页显示,js表格分页实现代码
function Page(iAbsolute,sTableId,sTBodyId,page)
{
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.__init__(); //初始化;
};
/**//*
初始化
*/
Page.prototype.__init__ = function(){
this.__oTable__ = document.getElementById(this.tableId);//获取table引用
this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId];//获取tBody引用
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.GetBar=function(obj)
{
var bar= document.getElementById(obj.id);
bar.innerHTML= "每页"+this.absolute+"条/共"+this.rowCount+"条";// 第2页/共6页 首页 上一页 1 2 3 4 5 6 下一页 末页
}
/**//*
下一页
*/
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(){
var abc = document.getElementById("pageno");
var iPageIndex = abc.value;
var iPageIndex = iPageIndex*1;
if(iPageIndex > this.pageCount-1){
this.pageIndex = this.pageCount -1;
}else if(iPageIndex < 0){
this.pageIndex = 0;
}else{
this.pageIndex = iPageIndex-1;
}
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__();
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__ = tempRows;
this.__oTBody__ = newTBody;
//页脚显示分
var divFood = document.getElementById("divFood");//分页工具栏
divFood.innerHTML="";
var rightBar = document.createElement("divFood");
rightBar.setAttribute("display","");
rightBar.setAttribute("float","left");
rightBar.innerHTML="第"+(this.pageIndex+1)+"页/共"+this.pageCount+"页";
var isOK="Y";
var cssColor="";
divFood.appendChild(rightBar);
页脚显示分页结
};
/**//*
克隆原始操作行集合
*/
Page.prototype.__cloneRows__ = function(){
var tempRows = [];
for(var i=0; i
tempRows[i] = this.__dataRows__[i].cloneNode(1);
}
return tempRows;
};
window.onload = function(){
page = new Page(3,'senfe','group_one'); };
#senfe {
border-top: #000 1px solid;
border-left: #000 1px solid;
}
#senfe td {
border-right: #000 1px solid;
border-bottom: #000 1px solid;
}
-->
function senfe(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
}
}
-->
编号
套类别
A套
B套
名称数量单价
单位
个
双
酒店名称备注1 2 3 4 5 6 7 8 9
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
senfe("senfe","#fff","#ccc","#cfc","#f00");
-->
/第
页/跳转
html实现表格分页显示,js表格分页实现代码相关推荐
- mysql 分页查询web_JavaWeb分页显示内容之分页查询的三种思路(数据库分页查询)...
JavaWeb分页显示内容之分页查询的三种思路(数据库分页查询)-1.jpg (40.23 KB, 下载次数: 0) 2018-8-18 13:34 上传 在开发过程中,经常做的一件事,也是最基本的事 ...
- 怎么在HTML上显示数据库的表格,在预定义的html表格中显示数据库表格记录
我有一个名为Table_I的表格,有31行.我想显示每行到一个预定义(现有)31个单元格的表.也就是说,每个表格行都放入每个单独的表格单元格.在预定义的html表格中显示数据库表格记录 Table_I ...
- html表格为什么不显示,数据表格不显示HTML表格数据
我有一个HTML表格数组,我在调用dataTables之前构建,但是我的表格中的数据在我拨打电话时不会显示,除非我在前面放置符合代码的警报dataTables被调用.代码工作正常,除非我删除'aler ...
- latex中表格怎么加标题_导出到LaTeX时,使组织表格标题显示在表格下方 | 所有编程讨论 | zhouni.net...
我正在制作一份文件 org-mode 其中有相当多的表,使用内置的表功能构建.我已经为表格添加了标题,但是当我将它们导出到 LaTeX,而不是出现在表格下方的标题,它出现在它上面.在手册中 关于表格的 ...
- java怎么设置表格分页显示_javaweb--layui表格分页
本文最好是有一定javaweb 基础的人查看,你知道,一些最简单的jdbc的实际操作(CRUD) 如何写出以待用.css,.js的外部模板的jsp页面: 使用最基础的javaweb知识来实现Layui ...
- html分页显示标题,在分页符后显示当前表格标题html
如何在动态表中断点后显示pagepbreak(在打印预览模式下)发生的当前表头? 所以,如果这是我的表和分页符第二集后发生...... Head Cell 1a Head Cell 2a Head C ...
- asp oracle 分页显示,asp + oracle 分页方法(不用存储过程)
asp 中查询 oracle数据库 的分页程序,没有用存储过程,效率还可以. 代码如下: '''' 塞北的雪 分页利器(oracle) 不用存储过程 -------------------- ...
- 利用js制作html table分页示例(js实现分页)
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...
- Django mysql 分页显示_django之分页显示
演示环境接上篇django. 说明: Django提供了一些类,来实现管理数据分页:Paginator对象.Page对象. 其中Paginator类对象介绍如下: Paginator(列表,int): ...
- android读取所有图片分页打印,js控制分页打印、打印分页示例
html和html5详解 最近看群里聊天聊得最火热的莫过于手机网站和html5这两个词.可能有人会问,这两者有什么关系呢?随着这移动互联网快速发展的时代,尤其是4G时代已经来临的时刻,加上微软对&qu ...
最新文章
- 阿里云centos配置nginx和nodejs
- Java 多重catch语句的使用
- 【sprinb-boot】@ComponentScan 跳过扫描 excludeFilters
- 利用Quartus设计4位同步二进制加法计数器
- 面试中关于Java你所需知道的的一切
- mysql in 按顺序排序_mysql in 排序 也可以按in里面的顺序来排序
- ruby中!!_Ruby反向! 功能
- ES6新特性_ES6集合实践---JavaScript_ECMAScript_ES6-ES11新特性工作笔记031
- 推荐几本jquery书
- The authors of these two monitoring tools
- 8.3 折特惠票仅剩 5 天!「2019 嵌入式智能国际大会」全日程大公开!
- jQuery LigerUI API预览版发布
- php while循环语句格式,PHP while 循环
- android 当手柄打游戏,玩手游需不需要配手柄?谈移动游戏外设的三个机会
- windows操作系统下新建txt文件快捷键
- Java的ActiveX控件_注册ActiveX控件的几种方法 - 镜花水月 - JavaEye技术网站
- 区块链 之 以太坊的那些坑
- Windows电脑如何开启CPU虚拟化
- 从mysql中查询关键字_mysql中查询常用的关键字
- oracle之归档日志空间管理
热门文章
- 2022款华硕灵耀pro16和华硕proart创16区别哪个好哪个更值得入手
- java 换行规范_Java代码规范
- yii框架封装拼多多开放平台sdk
- [全网最新最全]2020年国内和国外安卓应用上线上架应用市场渠道集合(关键词:apk,发布,Google Play,Android,详细步骤介绍流程)
- 2023最新SSM计算机毕业设计选题大全(附源码+LW)之java新华书店o2o服务系统89nml
- ubuntu修改dns服务器,配置Ubuntu DNS服务器
- java dateutil 获取时间戳_java获取时间戳的方法
- table表格固定表头
- Vue官方文档代码大全
- 【云存储】企业云存储管理解决方案