DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JavaScript實現列表分頁功能特效
JavaScript實現列表分頁功能特效
編輯:JavaScript綜合知識     

   最近寫了一個js分頁的方法,盡管已經有現成的可以用,但還是想自己寫寫,搞搞清楚。最終實現的效果是:上一頁、第一頁、…(上n個頁碼)、n個頁碼、…(下n個頁碼)、最後一頁、下一頁。n可以是奇數也可以是偶數,一般都喜歡取奇數,星石調用的時候傳入的參數是5。寫的時候,主要注意了以下幾個地方:

  頁碼等於1時,只顯示上一頁、第一頁、最後一頁,且都沒有跳轉;

  頁碼小於等於2時,不需要中間的n個頁碼;

  頁碼小於等於n時,顯示所有頁碼,不顯示2個“…”;

  2個“…”換頁時,換n個頁碼,如果接近最前面或最後面幾頁了,則顯示最前面或最後面n個頁碼。

  下面貼出代碼,供大家探討:

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 //總頁數,當前頁數,跳轉地址,第一頁和最後一頁之間顯示的頁碼數量 function pageBar(tp,cp,url,pn){ var str = ‘<ul class=”page”>'; if(tp>1 && cp>1){ var prev = cp-1; str += ‘<li><a class=”prev” title=”上一頁” href=”javascript:goPage(‘+prev+‘,”+url+‘');”><span>上一頁</span></a></li> ‘; }else{ str += ‘<li><a class=”prev” title=”上一頁” href=”javascript:void(0);”><span>上一頁</span></a></li> ‘; } if(tp>1){ //第一頁 if(cp==1){ str +=‘<li class=”current”><a href=”javascript:goPage(1,”+url+‘');”><span>1</span></a></li> ‘; }else{ str +=‘<li><a href=”javascript:goPage(1,”+url+‘');”><span>1</span></a></li> ‘; }   if(tp>2){ var pnh = Math.floor(pn/2);   //循環開始頁碼 var s = cp-pnh; if(s<=1){ s = 2; }   //循環結束頁碼 var e = cp+pnh; if(e>=tp){ e = tp-1; }   if(s<=(1+pnh)){ if(tp>(pn+2)){ e = s+(pn-1); if(e>=tp){ e = tp-1; } }else{ s = 2; } }   if(e>=(tp-pnh)){ if(tp>(pn+2)){ s = e-(pn-1); if(s<=1){ s = 2; } }else{ e = tp-1; } }   if(e<s){ e = s; }   //第一頁後的多頁跳轉 if(s>2){ var sp = cp-pn; if(sp<1){ sp=1; } str += ‘<li><a name=”break” href=”javascript:goPage(‘+sp+‘,”+url+‘');”><span>…</span></a></li> ‘; }   for(var i=s;i<=e;i++){ if(i==cp){ str += ‘<li class=”current”><a href=”javascript:goPage(‘+i+‘,”+url+‘');”><span>'+i+‘</span></a></li> ‘; }else{ str += ‘<li><a href=”javascript:goPage(‘+i+‘,”+url+‘');”><span>'+i+‘</span></a></li> ‘; } }   //最後一頁前的多頁跳轉 if(e < (tp-1)){ var ep = cp+pn; if(ep>tp){ ep=tp; } str += ‘<li><a name=”break” href=”javascript:goPage(‘+ep+‘,”+url+‘');”><span>…</span></a></li> ‘; } }   //最後一頁 if(cp==tp){ str +=‘<li class=”current”><a href=”javascript:goPage(‘+tp+‘,”+url+‘');”><span>'+tp+‘</span></a></li> ‘; }else{ str +=‘<li><a href=”javascript:goPage(‘+tp+‘,”+url+‘');”><span>'+tp+‘</span></a></li> ‘; }   }else{ str +=‘ <li class=”current”><a href=”javascript:void(0);”><span>1</span></a></li> ‘; }   if(tp>1 && cp<tp){ var next = cp+1; str += ‘<li><a class=”next” title=”下一頁” href=”javascript:goPage(‘+next+‘,”+url+‘');”><span>下一頁</span></a></li>'; }else{ str += ‘<li><a class=”next” title=”下一頁” href=”javascript:void(0);”><span>下一頁</span></a></li>'; } str += ‘</ul>'; return str; }   //跳轉頁碼,跳轉地址 function goPage(cp,url){ window.location.href = url+cp; }

  以上所述就是本文的全部內容了,希望大家能夠喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved