js表格分页实现代码

分类：Web前端作者：编程之家用户

复制代码 代码如下:

<!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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

使用input+datalist简单实现实时匹配的可编辑下拉列表-并解决选定后浏览器默认只显示value的可读性问题
问题背景 最近小伙伴提了一个希望提高后台下拉列表可操作性的需求，原因是下拉列表选项过多，每次下拉选择比较费时费力且容易出错，硬着头皮啃了啃前端知识，网上搜寻了一些下拉列表实现的资料，这里总结一下。 P
前端js生成任意随机数
// n位随机数生成 function randomNum(n) { let sString = &quot;&quot;; let strings = &quot;abcdefghijklmnopq
Web前端：HTML最强总结 附详细代码
HTML是HyperText Markup Language的简称，中文名称:超文本标记语言，它是一种用于创建网页的 标准标记语言
Web前端：CSS最强总结 附详细代码
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
Web前端：JavaScript最强总结 附详细代码 带常用案例！
JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
糟糕的设计会为我们的工作带来什么启发？
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 一名开发者或设计师通常可以在一秒内指出优秀的设计，但对于糟糕的设计只需最多半
想实现多人协作的“在线Excel”？真没那么简单
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 Excel是我们办公中常用的工具 ，它几乎能为我们处理大部分数据，友好的交互
怎样使我们的用户不再抵触填写Form表单？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/8-tips-for-an-awesome-sign
不要再造轮子了：聊一聊 JavaScript 的 URL 对象是什么？
本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 如果我们自己编写从URL中分析和提取元素的代码，那么有可能会比较痛苦
Deno会在短期内取代Node吗？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/what-is-deno-and-will-it-r
您知道SASS吗？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/4-reasons-to-use-sass-in-y
还学的动吗？ 盘点下Vue.js 3.0.0 那些让人激动的功能
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/vuejs-3-0-0-beta-features-
SessionStorage、LocalStorage详解
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/sessionstorage-and-localst
详细了解JS Map，它和传统对象有什么区别？
一直以来，JavaScript使用数组和对象来定义和存放结构化数据， 在这篇文章中，我们将一起深挖另一种对象Map的一切，我们将会去了解它是什么、如何遍历、都包括什么属性和方法以及优缺点是什么。
合理使用CSS框架，加速UI设计进程
由于CSS的出现，现在的网站风格已经与它们很早之前的样子有了很大的不同。CSS的出现为原本平平无奇的网页注入了活力。这也是网站的用户体验得到进一步进化的原因。这可能就是当今几乎所有的网站或多或少都在使
开发一个渐进式Web应用程序PWA前都需要了解什么？
自苹果推出了iPhone应用商店以来，App成为了我们生活中不可或缺的一部分，而对于实体业务也是如此，现在各行业都在推出自己的App，但有没有人想过这样一种场景，如果自己的潜在客户还没有安装你的App
前端开发：这10个Chrome扩展你不得不知
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/10-top-chrome-extensions-f
你的按钮到底在帮助用户还是在误导用户？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://blog.bitsrc.io/do-your-buttons-lead-or-mi
三步带你开发一个短链接生成平台
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 前段时间在开发【葡萄城社区】公众号时有一个功能是需要用网页授权认证地址生成二
给萌新HTML5 入门指南
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 HTML5的发展改变了互联网技术趋势，前端热度依旧不减，所以对于应用开发人员
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot