最近寫了一個js分頁的方法，盡管已經有現成的可以用，但還是想自己寫寫，搞搞清楚。最終實現的效果是：上一頁、第一頁、…（上n個頁碼）、n個頁碼、…（下n個頁碼）、最后一頁、下一頁。n可以是奇數也可以是偶數，一般都喜歡取奇數，星石調用的時候傳入的參數是5。寫的時候，主要注意了以下幾個地方：
頁碼等于1時，只顯示上一頁、第一頁、最后一頁，且都沒有跳轉；
頁碼小于等于2時，不需要中間的n個頁碼；
頁碼小于等于n時，顯示所有頁碼，不顯示2個“…”；
2個“…”換頁時，換n個頁碼，如果接近最前面或最后面幾頁了，則顯示最前面或最后面n個頁碼。
下面貼出代碼，供大家探討：
//總頁數，當前頁數，跳轉地址，第一頁和最后一頁之間顯示的頁碼數量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; }以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
