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 相关文章推荐
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
创建与框架无关的JavaScript插件
Dec 01 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
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
Python科学计算包numpy用法实例详解
2018/02/08 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
公司道歉信范文
2014/01/09 职场文书
个人优缺点自我评价
2014/01/27 职场文书
电子信息专业自荐书
2014/02/04 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
个人委托书格式
2014/04/04 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
校长师德表现自我评价
2015/03/05 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书