JavaScript實(shí)現(xiàn)列表分頁(yè)功能特效

更新時(shí)間：2015年05月15日 11:27:26 投稿：hebedich

最近在做一個(gè)小項(xiàng)目，有時(shí)需要制作靜態(tài)頁(yè)面網(wǎng)站，而一旦涉及到文章的分頁(yè)，實(shí)現(xiàn)起來(lái)非常麻煩，自己又剛?cè)腴T(mén)，對(duì)js不是很熟悉，所以就拿來(lái)練練手。

最近寫(xiě)了一個(gè)js分頁(yè)的方法，盡管已經(jīng)有現(xiàn)成的可以用，但還是想自己寫(xiě)寫(xiě)，搞搞清楚。最終實(shí)現(xiàn)的效果是：上一頁(yè)、第一頁(yè)、…（上n個(gè)頁(yè)碼）、n個(gè)頁(yè)碼、…（下n個(gè)頁(yè)碼）、最后一頁(yè)、下一頁(yè)。n可以是奇數(shù)也可以是偶數(shù)，一般都喜歡取奇數(shù)，星石調(diào)用的時(shí)候傳入的參數(shù)是5。寫(xiě)的時(shí)候，主要注意了以下幾個(gè)地方：

　頁(yè)碼等于1時(shí)，只顯示上一頁(yè)、第一頁(yè)、最后一頁(yè)，且都沒(méi)有跳轉(zhuǎn)；
　頁(yè)碼小于等于2時(shí)，不需要中間的n個(gè)頁(yè)碼；
　頁(yè)碼小于等于n時(shí)，顯示所有頁(yè)碼，不顯示2個(gè)“…”；
　2個(gè)“…”換頁(yè)時(shí)，換n個(gè)頁(yè)碼，如果接近最前面或最后面幾頁(yè)了，則顯示最前面或最后面n個(gè)頁(yè)碼。

　　下面貼出代碼，供大家探討：

//總頁(yè)數(shù)，當(dāng)前頁(yè)數(shù)，跳轉(zhuǎn)地址，第一頁(yè)和最后一頁(yè)之間顯示的頁(yè)碼數(shù)量
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=”上一頁(yè)” href=”javascript:goPage(‘+prev+‘,\”+url+‘\');”><span>上一頁(yè)</span></a></li> ‘;
    }else{
      str += ‘<li><a class=”prev” title=”上一頁(yè)” href=”javascript:void(0);”><span>上一頁(yè)</span></a></li> ‘;
    }
    if(tp>1){
      //第一頁(yè)
      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);

        //循環(huán)開(kāi)始頁(yè)碼
        var s = cp-pnh;
        if(s<=1){
          s = 2;
        }

        //循環(huán)結(jié)束頁(yè)碼
        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;
        }

        //第一頁(yè)后的多頁(yè)跳轉(zhuǎn)
        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> ‘;
          }
        }

        //最后一頁(yè)前的多頁(yè)跳轉(zhuǎn)
        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> ‘;
        }
      }

      //最后一頁(yè)
      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=”下一頁(yè)” href=”javascript:goPage(‘+next+‘,\”+url+‘\');”><span>下一頁(yè)</span></a></li>';
    }else{
      str += ‘<li><a class=”next” title=”下一頁(yè)” href=”javascript:void(0);”><span>下一頁(yè)</span></a></li>';
    }
    str += ‘</ul>';
    return str;
  }

  //跳轉(zhuǎn)頁(yè)碼，跳轉(zhuǎn)地址
  function goPage(cp,url){
    window.location.href = url+cp;
  }

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: