<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>
分享到：
相关推荐
标题 "Node.js-g9.js一个javascript库用于创建自动化交互图形" 暗示了这是一个基于JavaScript的库，专为在Node.js环境中构建自动化且交互式的图形界面设计。g9.js库利用JavaScript的强大功能，提供了丰富的工具和...
标题中的“一个ＪＳ类（收藏）”暗示了我们即将探讨的是JavaScript中关于类和对象的概念，这在JavaScript编程中是至关重要的。JavaScript是一种基于原型的面向对象语言，这意味着类的概念是通过原型来实现的。...
"Toastjs一个JavaScript原型吐司消息" 这个标题指的是一个名为Toast.js的JavaScript库，它主要用于实现"吐司"（Toast）消息功能。在UI设计中，吐司消息是一种轻量级的通知方式，通常用于显示短暂、非中断性的提示...
JSEditor是Eclipse中的一个JavaScript开发插件，旨在提升JavaScript开发者的工作效率和代码质量。这个插件提供了丰富的功能，包括语法高亮、自动完成、错误检查和调试工具等。 1. **语法高亮**：JSEditor为...
“pinyin4js是一个汉字转拼音的Javascript开源库”表明这是一个JavaScript库，它的主要功能是将汉字转换为对应的拼音表示。在网页应用或者JavaScript编程中，这样的库可以帮助开发者处理与汉字拼音相关的任务，比如...
C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类
主体就是用一个Table， 控制其每一个td的class来实现的。 地址：http://www.topnorth.cn/upload/rects.html 或者打开 http://www.topnorth.cn 进javascript栏目，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作为客户端脚本语言，可用于...
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" 指的是使用...
neurojs 一个javascript深度学习和强化学习库
Node.js是一个Javascript运行环境(runtime environment)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好...
在JavaScript编程中，有时我们需要在一个JS文件中使用另一个JS文件中的功能或变量。这可以通过引入或调用外部JS文件来实现。以下详细介绍了三种在JS文件中引入另一个JS文件的方法。 **方法一：通过`<script>`标签...
jsvu是一个JavaScript（引擎）版本更新程序
watermark.js 是一个 JavaScript 框架用于以批量的方式对图片插入水印。它利用 HTML5 canvas 标签实现，只要为图片添加特定的 class 就能添加水印。采用 ES6 编写而成，并通过 Babel 提供给当前的浏览器。支持网址、...