一个通用的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.               
  24.             var pagestr = "";  
  25.             var prevnum = currentpage-currentposition;  
  26.             var nextnum = currentpage+currentposition;  
  27.             if(prevnum<1) prevnum = 1;  
  28.             if(nextnum>pagecount) nextnum = pagecount;  
  29.             pagestr += (currentpage==1)?'<span class="disabled"> <上一页</span>':'<span><a  href="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()-1)+',\''+pageName+'\')"><上一页</a></span>';  
  30.             if(prevnum-breakspace>maxspace){  
  31.                 for(i=1;i<=breakspace;i++)  
  32.                 pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>';  
  33.                 pagestr += '...';  
  34.                 for(i=pagecount-breakpage+1;i<prevnum;i++)  
  35.                     pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>';  
  36.             }else{  
  37.                 for(i=1;i<prevnum;i++)  
  38.                 pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>';  
  39.             }  
  40.             for(i=prevnum;i<=nextnum;i++){  
  41.                 pagestr += (currentpage==i)?'<span class="current">'+i+'</span>':'<a href="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 += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>';  
  46.                 pagestr += '<span class="break">...</span>';  
  47.                 for(i=pagecount-breakspace+1;i<=pagecount;i++)  
  48.                     pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>';  
  49.             }else{  
  50.                 for(i=nextnum+1;i<=pagecount;i++)  
  51.                         pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>';  
  52.             }  
  53.             pagestr += (currentpage==pagecount)?'<span class="disabled">下一页  ></span>':'<a href="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()+1)+',\''+pageName+'\')">下一页  ></a>';  
  54.           
  55.             this.$(id).className="manu"  
  56.             this.$(id).innerHTML=pagestr;  
  57.     }  
  58.     this.getTotalNum = function()  
  59.     {  
  60.         return totalNum;  
  61.     };  
  62.     this.setTotalNum = function(sTotalNum)  
  63.     {  
  64.         totalNum = sTotalNum;  
  65.     };  
  66.     this.getMaxNum = function()  
  67.     {  
  68.         return maxNum;  
  69.     };  
  70.     this.setMaxNum=function(sMaxNum)  
  71.     {  
  72.         maxNum = sMaxNum;  
  73.     };  
  74.     this.getIndexPage = function()  
  75.     {  
  76.         return currentpage;  
  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.         return document.getElementById(objStr);  
  91.     }  
  92.   
  93. }  
  94. function $(objStr)  
  95. {  
  96.     return document.getElementById(objStr);  
  97. }  
  98. function pagination_data()  
  99. {  
  100. }  

 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.           
  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. .manu A {  
  10.     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  
  11. }  
  12. .manu A:hover {  
  13.     BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid  
  14. }  
  15. .manu A:active {  
  16.     BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid  
  17. }  
  18. .manu .current {  
  19.     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  
  20. }  
  21. .manu .disabled {  
  22.     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  
  23. }  

 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.   
  14.   
  15. <div id="12333"></div>  
  16. <script>  
  17.     var page = new Pagination("12333");  
  18.     page.setTotalNum(1000);//总共有多少条  
  19.     page.setMaxNum(20);//每页显示的条数  
  20.        page.setIndexPage(1);//当前所在第几页  
  21.        page.initPage("page");//初始化页面  
  22.     function pagination_data()  
  23.     {  
  24.         alert(page.getIndexPage()+":"+page.getMaxNum());  
  25.     }  
  26. </script>  
  27.     </body>  
  28. </html>  
posted @ 2014-07-24 17:21  super1234  阅读(428)  评论(0)  编辑  收藏  举报