<html>
<body><div id="table"></div><div id="table1"></div></body>
</html>
<script>
var Table=function(id,header,data){
this.header=header;
this.data=data;
this.init=function(){
if(!header instanceof Array){alert("表格猎头错误");}
if(!data instanceof Array){alert("传入的数据错误");}
this.table=A("table");
this.table.border="1";
var hRow=A("tr");
for(var i=0;i<header.length;i++){
var td=A("td");
td.innerHTML=header[i];
hRow.appendChild(td);
}
this.table.appendChild(hRow);
data.reverse();
for(var i=data.length-1;i>=0;i--){
var row=A("tr");
for(var value in data[i]){
var td=A("td");
td.innerHTML=data[i][value];
row.appendChild(td);
}
this.table.appendChild(row);
}
$(id).innerHTML=this.table.outerHTML;
}
}
var TableSplit=function(id,header,data,num){
this.firstPage=1;
this.nowPage=1;
this.totalPage=data.length%num==0?data.length/num:parseInt(data.length/num)+1;
this.doInit=function(){
Table.call(this,id,header,data.slice((this.nowPage-1)*num,this.nowPage*num));
this.init();
$(id).innerHTML+="总共"+data.length+"条记录,"+this.totalPage+"页,每页"+num+"条,当前第"+this.nowPage+"页,";
this.splitOperater(this);
}
this.splitOperater=function(split){
var nextB=A("button");
nextB.value='下一页';nextB.onclick=function(){split.doOperate(split,"A");}
var upB=A("button");
upB.value='上一页';upB.onclick=function(){split.doOperate(split,"B");};
switch(split.nowPage){
case 1:$(id).appendChild(nextB);break;
case this.totalPage:$(id).appendChild(upB);break;
default:$(id).appendChild(upB);$(id).appendChild(nextB);
}
for(var i=0;i<split.totalPage;i++){
var font=A("font");font.color='red';font.style.cursor="hand";font.innerText=i+1;
font.onclick=function(){split.doOperate(split,this.innerText);}
$(id).appendChild(font);
}
}
if(!TableSplit.prototype.doOperate){
TableSplit.prototype.doOperate=function(){
switch(arguments[1]){
case 'A':arguments[0].nowPage++;arguments[0].doInit();break;
case 'B':arguments[0].nowPage--;arguments[0].doInit();break;
default:arguments[0].nowPage=parseInt(arguments[1]);arguments[0].doInit();
}
}
}
}
function A(type){return document.createElement(type);}
function $(id){return document.getElementById(id);}
var header=['姓名','年龄'];
var data=[];
for(var i=0;i<50;i++){
data.push({name:i,age:i});
}
var tableSplit=new TableSplit("table",header,data,10);
tableSplit.doInit();
var data1=[];
for(var i=0;i<54;i++){
data1.push({name:"aa"+i,age:"dd"+i});
}
var tableSplit1=new TableSplit("table1",header,data1,10);
tableSplit1.doInit();
</script>
分享到：
相关推荐
【标题】：“仪表盘的一个js Demo”涉及到的知识点主要集中在JavaScript（js）编程语言和HTML网页设计上，尤其是如何在网页上实现动态的实时仪表盘显示。JavaScript是一种广泛用于网页和网络应用的脚本语言，它能为...
"Toastjs一个JavaScript原型吐司消息" 这个标题指的是一个名为Toast.js的JavaScript库，它主要用于实现"吐司"（Toast）消息功能。在UI设计中，吐司消息是一种轻量级的通知方式，通常用于显示短暂、非中断性的提示...
《一个JS类（收藏）——深入理解Prototype.js与JavaScript原型机制》 在JavaScript的世界里，对象的继承和原型是至关重要的概念。Prototype.js是一个广泛使用的JavaScript库，它为JavaScript提供了许多面向对象编程...
Compressor.js一个JavaScript图像压缩器。 使用浏览器的原生canvas.toBlob API来执行压缩工作，这意味着它是有损压缩。 一般使用此方法在客户端上传图像文件之前对其进行预压缩。
【标题】"一个简单的js例子"所提及的是一个JavaScript编程的示例，JavaScript是一种广泛用于网页和网络应用的脚本语言。它主要负责实现客户端的交互性，如动态内容更新、表单验证以及用户界面的实时反馈。JavaScript...
JSEditor是Eclipse中的一个JavaScript开发插件，旨在提升JavaScript开发者的工作效率和代码质量。这个插件提供了丰富的功能，包括语法高亮、自动完成、错误检查和调试工具等。 1. **语法高亮**：JSEditor为...
“pinyin4js是一个汉字转拼音的Javascript开源库”表明这是一个JavaScript库，它的主要功能是将汉字转换为对应的拼音表示。在网页应用或者JavaScript编程中，这样的库可以帮助开发者处理与汉字拼音相关的任务，比如...
C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类
brain.js是一个JavaScript神经网络库
qrcode.js是用于生成二维码的一个JavaScript库，只需引用这个，就能自己生成想要的二维码，里面可以添加文字、图片、网址等信息，也可以修改文字样式
kinto.js, Kinto的脱机第一个JavaScript客户端 Kinto.js 离线的第1 层JavaScript客户端，用于 Kinto 。注意：如果你正在寻找Kinto的纯 HTTP js客户端，请查看 kinto-http.js 。想法是在默认情况下在浏览器中保持数据...
标题中的“一个非常好的js解析xml生成一个tree”指的是使用JavaScript编程语言将XML（可扩展标记语言）数据转换为树形结构。在Web开发中，XML常用于存储和传输结构化数据，而JavaScript作为客户端脚本语言，可用于...
DC.js：一个 JavaScript 数据可视化图表库。通过单击一个图上的特定数据点，其他人使用新数据进行更新，维度图表非常精彩。DC 使用一个名为 crossfilter 的优秀 JavaScript 库来实现这些动态可视化。
4. **N-API**：N-API是Node.js的一个稳定接口，它独立于JavaScript引擎，这意味着即使Node.js的V8引擎更新，你的addon依然可以正常工作。N-API提供了C/C++ API，用于创建和管理Node.js对象，以及定义和调用C++函数。...
"jstree" 是一个流行的JavaScript库，专门用于创建交互式的树状视图。这个库是纯JavaScript编写的，因此无需依赖任何其他服务器端技术，如Java (j2ee) 或特定的JavaScript框架。"javascript js tree" 指的是使用...
Node.js是一个Javascript运行环境(runtime environment)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好...
在JavaScript编程中，有时我们需要在一个JS文件中使用另一个JS文件中的功能或变量。这可以通过引入或调用外部JS文件来实现。以下详细介绍了三种在JS文件中引入另一个JS文件的方法。 **方法一：通过`<script>`标签...
jsvu是一个JavaScript（引擎）版本更新程序