JQuery插件——通用分页组件

在实际项目开发中，通用的分页组件是必不可少的。下面描述的是关于JavaScript版的分页组件。该组件是基于jquery之上开发的。

       该组件包括

       jquery-1.3.2.min.js; (jquery 核心类库)

       jquery.pager.js; (分页组件类库)

       PagerDemo.js; (用于js与html分离)

       Pager.css ;

       PagerDemo.html

 

运行效果图如下：

      
   图一、运行效果图

 

具体实现代码：

jquery.pager.js

 

Js代码  

1. (function($) {     
2.     $.fn.pager = function(options) {  
3.         var opts = $.extend({}, $.fn.pager.defaults, options);    
4.         return this.each(function() {         
5.             $(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));                         
6.             $('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto";});    
7.         });  
8.     };     
9.       
10.     function renderpager(pagenumber, pagecount, buttonClickCallback) {           
11.         var $pager = $('<ul class="pages"></ul>');         
12.         $pager.append(renderButton('首页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('上一页', pagenumber, pagecount, buttonClickCallback));         
13.         var startPoint = 1;   
14.         var endPoint = 9;  
15.         var thpoint="<li class='thpoint'>...</li>";  
16.         if (pagenumber > 4) {  
17.             startPoint = pagenumber - 4;  
18.             endPoint = pagenumber + 4;  
19.         }  
20.         if (endPoint > pagecount) {  
21.             startPoint = pagecount - 8;  
22.             endPoint = pagecount;  
23.             thpoint = "";  
24.         }  
25.         if (startPoint < 1) {  
26.             startPoint = 1;  
27.         }          
28.         for (var page = startPoint; page <= endPoint; page++) {  
29.             var currentButton = $('<li class="page-number">' + (page) + '</li>');  
30.             page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() {  
31.                 buttonClickCallback(this.firstChild.data);  
32.             });  
33.             currentButton.appendTo($pager);  
34.         }         
35.         $pager.append(thpoint).append(renderButton('下一页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('末页', pagenumber, pagecount, buttonClickCallback));  
36.         $pager.append("<li class='thpoint' style='margin-top:3px;'>共: "+pagecount+" 页</li>");  
37.         var strgoto = $("<li class='thpoint'>当前<input type='text' value='"+pagenumber+"'maxlength='6' id='gotoval' style='width:20px; height:16px;margin-top:-3px;padding-top:2px;padding-left:10px;'/>页</li>");  
38.         $pager.append(strgoto);  
39.         $pager.append(changepage('go',pagecount,buttonClickCallback));  
40.         return $pager;  
41. }      
42. function changepage(buttonLabel,pagecount,buttonClickCallback){  
43.     var $btngoto = $('<li class="pgNext">'+ buttonLabel+'</li>');  
44.     $btngoto.click(function() {  
45.         var gotoval = $('#gotoval').val();  
46.         var patrn = /^[1-9]{1,20}$/;  
47.         if (!patrn.exec(gotoval)){  
48.             alert("请输入非零的正整数！");  
49.             return false;  
50.         }  
51.         var intval = parseInt(gotoval);  
52.         if(intval > pagecount){  
53.             alert("您输入的页面超过总页数 "+pagecount);  
54.             return ;  
55.         }  
56.         buttonClickCallback(intval);  
57.     });  
58.     return $btngoto;  
59. }  
60.   
61. function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {       
62.     var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');     
63.     var destPage = 1;         
64.     switch (buttonLabel) {  
65.         case "首页":  
66.             destPage = 1;  
67.             break;  
68.         case "上一页":     
69.             destPage = pagenumber - 1;  
70.             break;  
71.         case "下一页":  
72.             destPage = pagenumber + 1;            
73.         break;  
74.         case "末页":  
75.             destPage = pagecount;          
76.         break;       
77.     }              
78.     if (buttonLabel == "首页" || buttonLabel == "上一页") {       
79.         pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });       
80.     }         
81.     else {       
82.         pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });   
83.     }       
84.     return $Button;    
85.  }      
86.   
87.  $.fn.pager.defaults = {     
88.      pagenumber: 1,       
89.      pagecount: 1};  
90.  })(jQuery);  

  

 PagerDemo.js

 

Js代码  

1. $(document).ready(function() {  
2.     init(1);  
3. });  
4.   
5. //默认加载  
6. function init(pagenumber){  
7.     //向服务器发送请求，查询满足条件的记录  
8.     //$.getJSON('',{},function(data){  
9.         //data 为返回json 对象 并包括(pagecount、totalcount)的key-value值;  
10.         var data = {'pagecount':15,'totalcount':150};  
11.         $("#pager").pager({ pagenumber: pagenumber, pagecount:data.pagecount,totalcount:data.totalcount, buttonClickCallback: PageClick});  
12.     //});  
13. }  
14.   
15. //回调函数  
16. PageClick = function(pageclickednumber) {  
17.     init(pageclickednumber);  
18.     $("#result").html("Clicked Page " + pageclickednumber);  
19. }  

 

Pager.css

 

Css代码  

1. /* jquery.page.js css  */  
2. ul.pages {display:block;border:none;text-transform:uppercase;font-size:12px;margin:10px 0 50px;padding:0;}  
3. ul.pages li {list-style:none;float:left;border:1px solid #b36d41;text-decoration:none;margin:0 5px 0 0;padding:5px;}  
4. ul.pages li:hover {border:1px solid #afdfe4;background-color:#afdfe4;}  
5. ul.pages li.pgEmpty {border:1px solid #f0f0f0;color:#d9d6c3;background-color:#f0f0f0;}  
6. ul.pages li.thpoint {border:none;cursor:auto; color:#000;background-color:#fff;}  
7. ul.pages li.pgCurrent {padding: 4px 4px;border: 3px double #fff; + border-color: #afdfe4;color:#FFF;font-weight:700;background-color:#afdfe4;}  

 

 

PagerDemo.html

         需要装载容器div

 

Html代码  

1. <html xmlns="http://www.w3.org/1999/xhtml">  
2. <head>      
3. <title>jQuery.pager.js Test</title>     
4. <link href="Pager.css" rel="stylesheet" type="text/css" />     
5. <script src="jquery-1.3.2.min.js" type="text/javascript"></script>    
6. <script src="jquery.pager.js" type="text/javascript"></script>    
7. <script src="PagerDemo.js" type="text/javascript"></script>  
8. </head>  
9.     <body>  
10.     <h1 id="result">Click the pager below.</h1>  
11.     <div id="pager" ></div>  
12.     </body>  
13. </html>  

 

end...

• jquery.pager.rar (21.7 KB)
• 下载次数: 1086

• 查看图片附件