一个javascript的分页函数。（未完全版）
星期三, 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类代码了，请期待吧。
