jquery自制前端分页

1、项目中常用的简易分页，超过1页显示，使用/search接口传值为page,需要接收总条数data-sum,每页条数data-every

CSS

.pages{width:100;height: 32px;margin: 15px auto;text-align: center;line-height: 32px;font-size:0;display:none;}
.pages div{text-align:right;display:inline-block;}
.pages a,.pages span{
    display:inline-block;
    padding: 0 10px;
    height:32px;
    /* border:1px solid #ddd; */
    border-right:none;
    color:white;
    line-height:30px;
    text-align:center;
    font-size:14px;
    cursor: pointer;
}
.pages a:hover{
    color:#4F93FE
}
.pages a.current{
    color:#4F93FE
}

HTML

<!-- 分页 data-sum从后台获得总条数 -->
                <div class="pages" data-sum=1000 data-every=50> 
                </div> 

JS

(function(){
    var p_n;//页码数量
    var current;//当前页码
    var p_url;//地址路径
    var p_every=$(".pages").data("every");//设置每页条数
    if($(".pages").data("sum")>p_every){//设置每页条数，大于该条数时分页出现
        $(".pages").show();
        $(".pages").append("<a class='page'>1</a>")
        p_n=Math.ceil($(".pages").data("sum")/p_every);//根据每页条数，获取页码数量
        p_url= document.location.toString();//获取本页的地址        
        if(p_url.indexOf("?") != -1){
            if(p_url.indexOf("page=")!=-1){
                current=parseInt(p_url.split("page=")[1]);
　　　　　　     p_url = p_url.split("page=")[0];
            }else{
                current=1;
                p_url=p_url+"&"                
            }
　　　　}else{
            current=1;
            p_url=p_url+"/search?"
        }
        showpage(current)
    }
    function showpage(a){
        if(1<p_n&&p_n<11){
            for(var i=2;i<=p_n;i++){
                var alink="<a class='page np'>"+i+"</a>"
                $(".pages").append(alink)
            }
        }else{
            if(a<=6&&a>0){
                for(var i=2;i<=9;i++){
                var alink="<a class='page np'>"+i+"</a>"
                $(".pages").append(alink)
                }
                var p_next=$("<span class='p_next np'>...</span>");
                $(".pages").append(p_next);
                var p_end="<a class='page np'>"+p_n+"</a>";
                $(".pages").append(p_end);          
            }else if(p_n-a<6){
                var p_pre=$("<span class='np p_pre'>...</span>");
                $(".pages").append(p_pre);
                for(var i=8;i>=1;i=i-1){
                var alink="<a class='page np'>"+(p_n-i)+"</a>"
                $(".pages").append(alink)
               }
                var p_end="<a class='page np'>"+p_n+"</a>";
                $(".pages").append(p_end);
            }else{
                var p_pre=$("<span class='np p_pre'>...</span>");
                $(".pages").append(p_pre);
                var p=[a-3,a-2,a-1,a,a+1,a+2,a+3];
                for(var i=0;i<p.length;i++){
                    var alink="<a class='page np'>"+p[i]+"</a>"
                    $(".pages").append(alink)
                }
                var p_next=$("<span class='np p_next'>...</span>");
                $(".pages").append(p_next);
                var p_end="<a class='page np'>"+p_n+"</a>";
                $(".pages").append(p_end);
            }      
        } 
        $(".page").each(function(){
            var that=$(this);
            if(that.text()==current){
                that.addClass("current")
            }
        }
        )
        
    }
    var np=current;
    $(".pages").on("click",".p_pre",function(e){
        e.preventDefault;
        np=np-5;
        if(np<0){
            np=6
        }
        $(".np").remove();
        showpage(np)
    });
    $(".pages").on("click",".p_next",function(e){
        e.preventDefault;
        if(np<5){np=6}
        np=np+5;
        if(np>=p_n){
            np=p_n-5
        }
        $(".np").remove();
        showpage(np)
    });
    $(".pages").on("click",".page",function(e){
        e.preventDefault;
        var that=$(this);
        var p_href=p_url+"page="+parseInt(that.text());
        that.prop("herf",p_href);
        //console.log(p_href);
        window.location.replace(p_href) //兼容火狐
        //var a_page=$("<a  href="+p_href+" ></a>");
        //a_page[0].click();//谷歌可用，火狐不行。。。
    });
}())