您的位置:知蚁博客 » 程序设计 » JavaScript实现列表分页功能

JavaScript实现列表分页功能

作者: 发布时间:2011-04-17 分类:程序设计 标签: 2,822人浏览

  最近写了一个js分页的方法,尽管已经有现成的可以用,但还是想自己写写,搞搞清楚。最终实现的效果是:上一页、第一页、…(上n个页码)、n个页码、…(下n个页码)、最后一页、下一页。n可以是奇数也可以是偶数,一般都喜欢取奇数,星石调用的时候传入的参数是5。写的时候,主要注意了以下几个地方:
 页码等于1时,只显示上一页、第一页、最后一页,且都没有跳转;
 页码小于等于2时,不需要中间的n个页码;
 页码小于等于n时,显示所有页码,不显示2个“…”;
 2个“…”换页时,换n个页码,如果接近最前面或最后面几页了,则显示最前面或最后面n个页码。
  下面贴出代码,供大家探讨:

JavaScript语言: 知蚁博客 程序设计
//总页数,当前页数,跳转地址,第一页和最后一页之间显示的页码数量
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;
    }

原创文章请注明转载于知蚁博客,本文地址:http://www.letuknowit.com/archives/54

相关文章

我来说说

(必须)

(必须,保密)

你确定你已经看过文章了?
取消

无觅相关文章插件,快速提升流量