<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包" 描述了这是一个个人开发的JavaScript库或者组件集合，通常这类项目由开发者为了满足特定需求或实现某些功能而创建。JavaScript是一种广泛应用于Web开发的编程语言，它主要负责浏览器端的...
【标题】：“仪表盘的一个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来执行压缩工作，这意味着它是有损压缩。 一般使用此方法在客户端上传图像文件之前对其进行预压缩。
JSEditor是Eclipse中的一个JavaScript开发插件，旨在提升JavaScript开发者的工作效率和代码质量。这个插件提供了丰富的功能，包括语法高亮、自动完成、错误检查和调试工具等。 1. **语法高亮**：JSEditor为...
“pinyin4js是一个汉字转拼音的Javascript开源库”表明这是一个JavaScript库，它的主要功能是将汉字转换为对应的拼音表示。在网页应用或者JavaScript编程中，这样的库可以帮助开发者处理与汉字拼音相关的任务，比如...
C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类
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作为客户端脚本语言，可用于...
JSC.js是一个JavaScript引擎，可以在浏览器的JavaScript引擎之上运行。 它基于WebKit的默认JavaScript引擎。 因此，如果您使用Safari，您可以自己运行其JavaScript引擎。
neurojs 一个javascript深度学习和强化学习库
在实际使用中，用户需要先编写或拥有一个JS文件，如"JS规范示例.js"，然后使用这个工具将其转换为C#代码。转换后的代码可能需要根据C#的编程规范进行调整和优化，以满足C#项目的编码标准和性能需求。 对于"JS规范...
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 提供给当前的浏览器。支持网址、...
总之，全国所有省份与城市javascript,js脚本是前端开发中实现动态选择地区功能的一个实例，它结合了数据结构、用户交互、DOM操作和性能优化等多个JavaScript核心概念。在实际应用中，开发者还需要关注安全性、可访问...