原料库管理

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表格分页实现代码相关推荐

  1. mysql 分页查询web_JavaWeb分页显示内容之分页查询的三种思路(数据库分页查询)...

    JavaWeb分页显示内容之分页查询的三种思路(数据库分页查询)-1.jpg (40.23 KB, 下载次数: 0) 2018-8-18 13:34 上传 在开发过程中,经常做的一件事,也是最基本的事 ...

  2. 怎么在HTML上显示数据库的表格,在预定义的html表格中显示数据库表格记录

    我有一个名为Table_I的表格,有31行.我想显示每行到一个预定义(现有)31个单元格的表.也就是说,每个表格行都放入每个单独的表格单元格.在预定义的html表格中显示数据库表格记录 Table_I ...

  3. html表格为什么不显示,数据表格不显示HTML表格数据

    我有一个HTML表格数组,我在调用dataTables之前构建,但是我的表格中的数据在我拨打电话时不会显示,除非我在前面放置符合代码的警报dataTables被调用.代码工作正常,除非我删除'aler ...

  4. latex中表格怎么加标题_导出到LaTeX时,使组织表格标题显示在表格下方 | 所有编程讨论 | zhouni.net...

    我正在制作一份文件 org-mode 其中有相当多的表,使用内置的表功能构建.我已经为表格添加了标题,但是当我将它们导出到 LaTeX,而不是出现在表格下方的标题,它出现在它上面.在手册中 关于表格的 ...

  5. java怎么设置表格分页显示_javaweb--layui表格分页

    本文最好是有一定javaweb 基础的人查看,你知道,一些最简单的jdbc的实际操作(CRUD) 如何写出以待用.css,.js的外部模板的jsp页面: 使用最基础的javaweb知识来实现Layui ...

  6. html分页显示标题,在分页符后显示当前表格标题html

    如何在动态表中断点后显示pagepbreak(在打印预览模式下)发生的当前表头? 所以,如果这是我的表和分页符第二集后发生...... Head Cell 1a Head Cell 2a Head C ...

  7. asp oracle 分页显示,asp + oracle 分页方法(不用存储过程)

    asp 中查询 oracle数据库 的分页程序,没有用存储过程,效率还可以. 代码如下: ''''  塞北的雪  分页利器(oracle)  不用存储过程   -------------------- ...

  8. 利用js制作html table分页示例(js实现分页)

    有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...

  9. Django mysql 分页显示_django之分页显示

    演示环境接上篇django. 说明: Django提供了一些类,来实现管理数据分页:Paginator对象.Page对象. 其中Paginator类对象介绍如下: Paginator(列表,int): ...

  10. android读取所有图片分页打印,js控制分页打印、打印分页示例

    html和html5详解 最近看群里聊天聊得最火热的莫过于手机网站和html5这两个词.可能有人会问,这两者有什么关系呢?随着这移动互联网快速发展的时代,尤其是4G时代已经来临的时刻,加上微软对&qu ...

最新文章

  1. 阿里云centos配置nginx和nodejs
  2. Java 多重catch语句的使用
  3. 【sprinb-boot】@ComponentScan 跳过扫描 excludeFilters
  4. 利用Quartus设计4位同步二进制加法计数器
  5. 面试中关于Java你所需知道的的一切
  6. mysql in 按顺序排序_mysql in 排序 也可以按in里面的顺序来排序
  7. ruby中!!_Ruby反向! 功能
  8. ES6新特性_ES6集合实践---JavaScript_ECMAScript_ES6-ES11新特性工作笔记031
  9. 推荐几本jquery书
  10. The authors of these two monitoring tools
  11. 8.3 折特惠票仅剩 5 天!「2019 嵌入式智能国际大会」全日程大公开!
  12. jQuery LigerUI API预览版发布
  13. php while循环语句格式,PHP while 循环
  14. android 当手柄打游戏,玩手游需不需要配手柄?谈移动游戏外设的三个机会
  15. windows操作系统下新建txt文件快捷键
  16. Java的ActiveX控件_注册ActiveX控件的几种方法 - 镜花水月 - JavaEye技术网站
  17. 区块链 之 以太坊的那些坑
  18. Windows电脑如何开启CPU虚拟化
  19. 从mysql中查询关键字_mysql中查询常用的关键字
  20. oracle之归档日志空间管理

热门文章

  1. 2022款华硕灵耀pro16和华硕proart创16区别哪个好哪个更值得入手
  2. java 换行规范_Java代码规范
  3. yii框架封装拼多多开放平台sdk
  4. [全网最新最全]2020年国内和国外安卓应用上线上架应用市场渠道集合(关键词:apk,发布,Google Play,Android,详细步骤介绍流程)
  5. 2023最新SSM计算机毕业设计选题大全(附源码+LW)之java新华书店o2o服务系统89nml
  6. ubuntu修改dns服务器,配置Ubuntu DNS服务器
  7. java dateutil 获取时间戳_java获取时间戳的方法
  8. table表格固定表头
  9. Vue官方文档代码大全
  10. 【云存储】企业云存储管理解决方案