JavaScript實現列表分頁功能特效_javascript技巧

最近寫了一個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;  }

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