一个javascript的分页函数。(未完全版)

xiaojue  1月 27th, 2010

在学习面向对象的JavaScript,今天花了会时间写了个分页的功能,用JS前端实现的,可是,问题在于还是不太明白,还是实践出真知,后来才发现写的根本不是什么类,还是全局对象满天飞的一个大函数,不过对我也有一定启发,看了看别人写的类,还是感觉不错,近期再修改下,添加上样式,会发布一个完全版的分页JS类。

下面是刚完成的分页函数。
Javascript部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/*@author xiaojue*/
//JS翻页类
var Npage=function(pageparent,putwhere,pagechild,size){
//类初始化
Npage.num=1;
Npage.s=document.getElementById(pageparent);
Npage.p=document.getElementById(putwhere);
Npage.d=document.getElementById(pageparent).getElementsByTagName(pagechild);
Npage.size=size;
//跳转
Npage.pagegoto = function(i){
Npage.num=i;
pageup();
};
//判断参数是否合法
if(Npage.s==null || Npage.p==null || Npage.d==null || isNaN(Npage.size)) return;
 
//分页
var nowpage=function(){
var nowpagehtml=[];
for(i=1;i<=zsize();i++){
nowpagehtml.push("<a href='#"+i+"' onclick='Npage.pagegoto("+i+")'>"+i+"</a>");
}
nowpagehtml=nowpagehtml.join(" ");
return nowpagehtml;
}
//输出
Npage.p.innerHTML="每页共"+Npage.size+"条";
Npage.p.innerHTML+=" <a href='#prev' class='Nprev'>上一页</a>";
Npage.p.innerHTML+=nowpage();
Npage.p.innerHTML+=" <a href='#next' class='Nnext'>下一页</a>";
Npage.p.innerHTML+=" 共有"+zsize()+"页";
//上下分页
var Na=Npage.p.getElementsByTagName("a");
for(i=0;i<Na.length;i++){
if(Na[i].className!="Nprev") continue;
Na[i].onclick=Nprevaction;
}
for(i=0;i<Na.length;i++){
if(Na[i].className!="Nnext") continue;
Na[i].onclick=Nnextaction;
}
//
pageup();
};
//显示条数
var pageup = function(){
for (i = 0; i < Npage.d.length; i++) {
Npage.d[i].style.display = "none";
}
for (j = 0; j < Npage.d.length; j++) {
if (j >= Npage.num*Npage.size || j < (Npage.num-1)*Npage.size) continue;
Npage.d[j].style.display = "block";
}
}
//获得总页数
var zsize=function(){
return Math.ceil(Npage.d.length/Npage.size);
} 
//分页
var Nprevaction=function(){
if(Npage.num==1){alert("没有上一页了");return}
Npage.num=Npage.num-1;
pageup();
}
var Nnextaction=function(){
if(Npage.num==zsize()){alert("没有下一页了");return}
Npage.num=Npage.num+1;
pageup();
}

使用方法:

1
2
3
window.onload=function(){
var mypage1= new Npage("table1","page1","tr",4);
}

详细浏览地址如下:
http://www.deisgnsor.com/demo/function.html

再发布就准备是添加自定义样式和真正的JS类代码了,请期待吧。

Tags:



写新回应:


Dtools Top
本页文章快速定位...