首页 > 编程 > JavaScript > 正文

JavaScript实现列表分页功能特效

2019-11-20 12:28:04
字体:
来源:转载
供稿:网友

最近写了一个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;  }

以上所述就是本文的全部内容了,希望大家能够喜欢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表