首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js表格分页实现代码

Posted in Javascript onSeptember 18, 2009 
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="zh-CN" /> 
<meta content="all" name="robots" /> 
<meta name="Copyright" content="" /> 
<meta name="description" content="" /> 
<meta content="" name="keywords" /> 
<link rel="stylesheet" type="text/css" href="css.css" /> 
<title>原料库管理</title> 
<script> 
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<this.__dataRows__.length; i++){ 
tempRows[i] = this.__dataRows__[i].cloneNode(1); 
} 
return tempRows; 
}; 
</script> 
<script type="text/javascript" language="javascript"> 
window.onload = function(){ 
page = new Page(3,'senfe','group_one'); }; 
</script> 
<style type="text/css"><!-- 
#senfe { 
border-top: #000 1px solid; 
border-left: #000 1px solid; 
} 
#senfe td { 
border-right: #000 1px solid; 
border-bottom: #000 1px solid; 
} 
--></style> 
<script language="javascript"><!-- 
function senfe(o,a,b,c,d){ 
var t=document.getElementById(o).getElementsByTagName("tr"); 
for(var i=0;i<t.length;i++){ 
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b; 
} 
} 
--></script> 
</head> 
<body> 
<div> 
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#006600" id="senfe"> 
<thead> 
<tr align="center" valign="middle"> 
<td width="46" height="23" bgcolor="#FFFFFF">编号</td> 
<td width="71" bgcolor="#FFFFFF"><select name="select" dir="ltr"> 
<option>套类别</option> 
<option>A套</option> 
<option>B套</option> 
</select></td> 
<td width="53" bgcolor="#FFFFFF">名称</td> 
<td width="53" bgcolor="#FFFFFF">数量</td> 
<td width="53" bgcolor="#FFFFFF">单价</td> 
<td width="95" bgcolor="#FFFFFF"><select name="select" dir="ltr"> 
<option>单位</option> 
<option>个</option> 
<option>双</option> 
</select></td> 
<td width="80" bgcolor="#FFFFFF">酒店名称</td> 
<td width="35" bgcolor="#FFFFFF">备注</td> 
</tr> 
</thead> 
<tbody id="group_one"> 
<tr> 
<td>1</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>2</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>3</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>4</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>5</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>6</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>7</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>8</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>9</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
</tbody> 
</table> 
<script language="javascript"><!-- 
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景"); 
senfe("senfe","#fff","#ccc","#cfc","#f00"); 
--></script> 
</div> 
<div><a href="#" onclick="page.firstPage();">首 页</a>/<a href="#" onclick="page.nextPage();">下一页</a>/<a href="#" onclick="page.prePage();">上一页</a>/<a href="#" onclick="page.lastPage();">末 页</a><span id="divFood"> 
</span> 
/第 
<input id="pageno" value="1" style="width:20px"/>页/<a href="#" onclick="page.aimPage();">跳转</a></div> 
</div> 
</div> 
</body> 
</html>

js表格分页实现代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
ext 同步和异步示例代码
Sep 18 #Javascript
JQuery的ajax基础上的超强GridView展示
Sep 18 #Javascript
jQuery 事件队列调整方法
Sep 18 #Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 #Javascript
javascript 面向对象编程 聊聊对象的事
Sep 17 #Javascript
javascript 面向对象编程 万物皆对象
Sep 17 #Javascript
javascript 面向对象编程 function也是类
Sep 17 #Javascript
S-2000(1) 代理(2) 选择器(1) 增删查改(1) #{}(1) 外键(1) 克隆(1) IC-R9500(1) SQL注入(2) 脏读(2)
You might like
php array_search() 函数使用
2010/04/13 PHP
php实现zip压缩文件解压缩代码分享（简单易懂）
2014/05/10 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
canvas知识总结
2017/01/25 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
AngularJS动态菜单操作指令
2017/04/25 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
布同 Python中文问题解决方法（总结了多位前人经验，初学者必看）
2011/03/13 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
pycham查看程序执行的时间方法
2018/11/29 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
python list多级排序知识点总结
2019/10/23 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
python urllib和urllib3知识点总结
2021/02/08 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
使用索引有什么好处
2016/07/27 面试题
宣传策划类求职信范文
2014/01/31 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
单位消防安全责任书
2014/07/23 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
关于MySQL中explain工具的使用
2023/05/08 MySQL