一个通用的JavaScript分页

1.JavaScript代码

Java代码  

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

2.CSS代码

Java代码  

1. /* CSS Document */
2. /* Paginator */
3. a img {blr:expression(this.onFocus=this.blur())}
4. area {blr:expression(this.onFocus=this.blur())}
5. .manu {
6. 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;
7. }
8. .manu A {
9. BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #036cb4; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid; TEXT-DECORATION: none
10. }
11. .manu A:hover {
12. BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid
13. }
14. .manu A:active {
15. BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid
16. }
17. .manu .current {
18. BORDER-RIGHT: #036cb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #036cb4 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #036cb4 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #036cb4 1px solid; #036cb4
19. }
20. .manu .disabled {
21. BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
22. }

3.使用例子

Java代码  

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <%@include file="/common/taglibs/taglibs.jsp"%>
3. <%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
4. <html xmlns="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>
13. <div id="12333"></div>
14. <script>
15. var page = new Pagination("12333");
16. page.setTotalNum(1000);//总共有多少条
17. page.setMaxNum(20);//每页显示的条数
18. page.setIndexPage(1);//当前所在第几页
19. page.initPage("page");//初始化页面
20. function pagination_data()
21. {
22. alert(page.getIndexPage()+":"+page.getMaxNum());
23. }
24. </script>
25. </body>
26. </html>

一个通用的JavaScript分页