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>
Javascript 相关文章推荐
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
JavaScript中操作字符串小结
May 04 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
js弹出对话框方式小结
Nov 17 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 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
You might like
写一个用户在线显示的程序
2006/10/09 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
python反扒机制的5种解决方法
2021/02/06 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
毕业生自荐信
2013/12/14 职场文书
快餐公司创业计划书
2014/04/29 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
大学活动总结模板
2014/07/10 职场文书
房屋转让协议书
2014/10/18 职场文书
招标保密承诺书
2015/01/20 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
导游词之河北野三坡
2019/12/11 职场文书
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python