1. 程式人生 > >JQuery外掛——通用分頁元件

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.     function renderpager(pagenumber, pagecount, buttonClickCallback) {           
  10.         var $pager = $('<ul class="pages"></ul>'
    );         
  11.         $pager.append(renderButton('首頁', pagenumber, pagecount, buttonClickCallback)).append(renderButton('上一頁', pagenumber, pagecount, buttonClickCallback));         
  12.         var startPoint = 1;   
  13.         var endPoint = 9;  
  14.         var thpoint="<li class='thpoint'>...</li>";  
  15.         if (pagenumber > 4) {  
  16.             startPoint = pagenumber - 4;  
  17.             endPoint = pagenumber + 4;  
  18.         }  
  19.         if (endPoint > pagecount) {  
  20.             startPoint = pagecount - 8;  
  21.             endPoint = pagecount;  
  22.             thpoint = "";  
  23.         }  
  24.         if (startPoint < 1) {  
  25.             startPoint = 1;  
  26.         }          
  27.         for (var page = startPoint; page <= endPoint; page++) {  
  28.             var currentButton = $('<li class="page-number">' + (page) + '</li>');  
  29.             page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() {  
  30.                 buttonClickCallback(this.firstChild.data);  
  31.             });  
  32.             currentButton.appendTo($pager);  
  33.         }         
  34.         $pager.append(thpoint).append(renderButton('下一頁', pagenumber, pagecount, buttonClickCallback)).append(renderButton('末頁', pagenumber, pagecount, buttonClickCallback));  
  35.         $pager.append("<li class='thpoint' style='margin-top:3px;'>共: "+pagecount+" 頁</li>");  
  36.         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>");  
  37.         $pager.append(strgoto);  
  38.         $pager.append(changepage('go',pagecount,buttonClickCallback));  
  39.         return $pager;  
  40. }      
  41. function changepage(buttonLabel,pagecount,buttonClickCallback){  
  42.     var $btngoto = $('<li class="pgNext">'+ buttonLabel+'</li>');  
  43.     $btngoto.click(function() {  
  44.         var gotoval = $('#gotoval').val();  
  45.         var patrn = /^[1-9]{1,20}$/;  
  46.         if (!patrn.exec(gotoval)){  
  47.             alert("請輸入非零的正整數!");  
  48.             return false;  
  49.         }  
  50.         var intval = parseInt(gotoval);  
  51.         if(intval > pagecount){  
  52.             alert("您輸入的頁面超過總頁數 "+pagecount);  
  53.             return ;  
  54.         }  
  55.         buttonClickCallback(intval);  
  56.     });  
  57.     return $btngoto;  
  58. }  
  59. function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {       
  60.     var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');     
  61.     var destPage = 1;         
  62.     switch (buttonLabel) {  
  63.         case "首頁":  
  64.             destPage = 1;  
  65.             break;  
  66.         case "上一頁":     
  67.             destPage = pagenumber - 1;  
  68.             break;  
  69.         case "下一頁":  
  70.             destPage = pagenumber + 1;            
  71.         break;  
  72.         case "末頁":  
  73.             destPage = pagecount;          
  74.         break;       
  75.     }              
  76.     if (buttonLabel == "首頁" || buttonLabel == "上一頁") {       
  77.         pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });       
  78.     }         
  79.     else {       
  80.         pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });   
  81.     }       
  82.     return $Button;    
  83.  }      
  84.  $.fn.pager.defaults = {     
  85.      pagenumber: 1,       
  86.      pagecount: 1};  
  87.  })(jQuery);  

 PagerDemo.js

Js程式碼  收藏程式碼
  1. $(document).ready(function() {  
  2.     init(1);  
  3. });  
  4. //預設載入  
  5. function init(pagenumber){  
  6.     //向伺服器傳送請求,查詢滿足條件的記錄  
  7.     //$.getJSON('',{},function(data){  
  8.         //data 為返回json 物件 幷包括(pagecount、totalcount)的key-value值;  
  9.         var data = {'pagecount':15,'totalcount':150};  
  10.         $("#pager").pager({ pagenumber: pagenumber, pagecount:data.pagecount,totalcount:data.totalcount, buttonClickCallback: PageClick});  
  11.     //});  
  12. }  
  13. //回撥函式  
  14. PageClick = function(pageclickednumber) {  
  15.     init(pageclickednumber);  
  16.     $("#result").html("Clicked Page " + pageclickednumber);  
  17. }  

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...