一个通用的javaScript分页

1.Javascript代码

1. Pagination=function(id)
2. {
3. vartotalNum=0;
4. varmaxNum=10;
5. varpageUrl="";
6. varbreakpage=5;
7. varcurrentposition=0;
8. varbreakspace=2;
9. varmaxspace=4;
10. varcurrentpage=1;
11. varperpage=10;
12. varid=id;
13. this.initPage=function(pageName)
14. {
15. varcount=this.getTotalNum();
16. perpage=this.getMaxNum();
17. if(currentpage==null){
18. currentpage=1;
19. }else{
20. currentpage=parseInt(currentpage);
21. }
22. varpagecount=Math.floor(count/perpage)+1;
24. varpagestr="";
25. varPRevnum=currentpage-currentposition;
26. varnextnum=currentpage+currentposition;
27. if(prevnum<1)prevnum=1;
28. if(nextnum>pagecount)nextnum=pagecount;
29. pagestr+=(currentpage==1)?'<spanclass="disabled"><上一页</span>':'<span><ahref="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()-1)+',/''+pageName+'/')"><上一页</a></span>';
30. if(prevnum-breakspace>maxspace){
31. for(i=1;i<=breakspace;i++)
32. pagestr+='<ahref="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
33. pagestr+='...';
34. for(i=pagecount-breakpage+1;i<prevnum;i++)
35. pagestr+='<ahref="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
36. }else{
37. for(i=1;i<prevnum;i++)
38. pagestr+='<ahref="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
39. }
40. for(i=prevnum;i<=nextnum;i++){
41. pagestr+=(currentpage==i)?'<spanclass="current">'+i+'</span>':'<ahref="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
42. }
43. if(pagecount-breakspace-nextnum+1>maxspace){
44. for(i=nextnum+1;i<=breakpage;i++)
45. pagestr+='<ahref="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
46. pagestr+='<spanclass="break">...</span>';
47. for(i=pagecount-breakspace+1;i<=pagecount;i++)
48. pagestr+='<ahref="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
49. }else{
50. for(i=nextnum+1;i<=pagecount;i++)
51. pagestr+='<ahref="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
52. }
53. pagestr+=(currentpage==pagecount)?'<spanclass="disabled">下一页></span>':'<ahref="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()+1)+',/''+pageName+'/')">下一页></a>';
55. this.$(id).className="manu"
56. this.$(id).innerHTML=pagestr;
57. }
58. this.getTotalNum=function()
59. {
60. returntotalNum;
61. };
62. this.setTotalNum=function(sTotalNum)
63. {
64. totalNum=sTotalNum;
65. };
66. this.getMaxNum=function()
67. {
68. returnmaxNum;
69. };
70. this.setMaxNum=function(sMaxNum)
71. {
72. maxNum=sMaxNum;
73. };
74. this.getIndexPage=function()
75. {
76. returncurrentpage;
77. };
78. this.setIndexPage=function(sCurrentPage)
79. {
80. currentpage=sCurrentPage;
81. };
82. this.page_onclick=function(num,pageStr)
83. {
84. this.setIndexPage(num);
85. pagination_data();
86. this.initPage(pageStr);
87. };
88. this.$=function(objStr)
89. {
90. returndocument.getElementById(objStr);
91. }
93. }
94. function$(objStr)
95. {
96. returndocument.getElementById(objStr);
97. }
98. functionpagination_data()
99. {
100. }

2.CSS代码

1. /*CSSDocument*/
2. /*Paginator*/
3. aimg{blr:expression(this.onFocus=this.blur())}
4. area{blr:expression(this.onFocus=this.blur())}
6. .manu{
7. PADDING-RIGHT:3px;PADDING-LEFT:3px;PADDING-BOTTOM:3px;MARGIN:3px;PADDING-TOP:3px;TEXT-ALIGN:center;FONT-SIZE:12px;FONT-FAMILY:Verdana,Arial,Helvetica,sans-serif;
8. }
9. .manuA{
10. BORDER-RIGHT:#eee1pxsolid;PADDING-RIGHT:5px;BORDER-TOP:#eee1pxsolid;PADDING-LEFT:5px;PADDING-BOTTOM:2px;MARGIN:2px;BORDER-LEFT:#eee1pxsolid;COLOR:#036cb4;PADDING-TOP:2px;BORDER-BOTTOM:#eee1pxsolid;TEXT-DECORATION:none
11. }
12. .manuA:hover{
13. BORDER-RIGHT:#9991pxsolid;BORDER-TOP:#9991pxsolid;BORDER-LEFT:#9991pxsolid;COLOR:#666;BORDER-BOTTOM:#9991pxsolid
14. }
15. .manuA:active{
16. BORDER-RIGHT:#9991pxsolid;BORDER-TOP:#9991pxsolid;BORDER-LEFT:#9991pxsolid;COLOR:#666;BORDER-BOTTOM:#9991pxsolid
17. }
18. .manu.current{
19. BORDER-RIGHT:#036cb41pxsolid;PADDING-RIGHT:5px;BORDER-TOP:#036cb41pxsolid;PADDING-LEFT:5px;FONT-WEIGHT:bold;PADDING-BOTTOM:2px;MARGIN:2px;BORDER-LEFT:#036cb41pxsolid;COLOR:#fff;PADDING-TOP:2px;BORDER-BOTTOM:#036cb41pxsolid;#036cb4
20. }
21. .manu.disabled{
22. BORDER-RIGHT:#eee1pxsolid;PADDING-RIGHT:5px;BORDER-TOP:#eee1pxsolid;PADDING-LEFT:5px;PADDING-BOTTOM:2px;MARGIN:2px;BORDER-LEFT:#eee1pxsolid;COLOR:#ddd;PADDING-TOP:2px;BORDER-BOTTOM:#eee1pxsolid
23. }

3.使用例子

1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <%@includefile="/common/taglibs/taglibs.jsp"%>
3. <%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
4. <htmlxmlns="http://www.w3.org/1999/xhtml">
5. <head>
6. <link
7. href="${pageContext.request.contextPath}/common/css/pagination.css"
8. rel="stylesheet"type="text/css"/>
9. <script
10. src="${pageContext.request.contextPath}/common/js/page-common.js"></script>
11. </head>
12. <body>
15. <divid="12333"></div>
16. <script>
17. varpage=newPagination("12333");
18. page.setTotalNum(1000);//总共有多少条
19. page.setMaxNum(20);//每页显示的条数
20. page.setIndexPage(1);//当前所在第几页
21. page.initPage("page");//初始化页面
22. functionpagination_data()
23. {
24. alert(page.getIndexPage()+":"+page.getMaxNum());
25. }
26. </script>
27. </body>
28. </html>