构造函数写分页

JS

function pagination() {
    this.str=undefined;
    this.urls=undefined;
    this.pag=undefined;
    this.totleList=undefined;
    this.datas=undefined;
    this.n=1;
    this.hoppage=10;
    this.switchKey=0;
    this.dataParams={};
    this.initPage=function (res){
        this.totleList=res.totalCount;
        this.pag=Math.ceil(this.totleList/this.hoppage);
        this.n=res.pageNum;
        if(this.switchKey==1){
            $("#pageWarp").empty();
            var oPagWarp=document.getElementById('pageWarp');
            for(var i=1;i<=this.pag; i ++){
                var oLi=document.createElement('li');
                oLi.className='pagNum1'
                oLi.innerHTML=i;
                oPagWarp.appendChild(oLi);
            }
            $('#pageWarp .pagNum1').eq(this.n-1).addClass('curCheck1');
        }
    };
    this.setpage=function (){
        var _this=this;
        switch(this.switchKey){
            case 0:
                this.datas={"pageNum":this.n,"pageSize":this.hoppage,"date":new Date().getTime()};
                break;
            case 1:
                this.datas={"provincialId":this.dataParams.provincialId,"pageNum":this.n,"pageSize":this.hoppage,"date":new Date().getTime()};
                break;
        }
        _this.getData(_this.urls,_this.datas,true,function(json){
            _this.data=json.data.list;
            _this.str(_this.data);
            _this.initPage(json);
        });
    };
    this.getData=function (url,dataParams,isAsync,callback,methodType) {
        var type = methodType || "POST";
        $.ajax({
            url: url,
            type: type,
            dataType: "json",
            data: dataParams,
            async: isAsync,
            success: function (data) {
                callback(data)
            },
            error: function (data) {
                console.log('获取数据失败');
            }
        });
    };
    this.initClass=function (){
        var _this=this;
        if(this.switchKey==1){
            for(var i = 0 ; i < $('#pageWarp .pagNum1').length; i++){
                $('#pageWarp .pagNum1').eq(i).removeClass('curCheck1')
            };
            $('#pageWarp .pagNum1').eq(_this.n-1).addClass('curCheck1');
        }else{
            if(_this.n==1){
                $("#btnL").addClass("no_allow");
            }else{
                $("#btnL").removeClass("no_allow");
            }
            if(_this.n==_this.pag){
                $("#btnR").addClass("no_allow");
            }else{
                $("#btnR").removeClass("no_allow");
            }
            for(var i = 0 ; i < $('.pageBarBox ul .pagNum').length; i++){
                $('.pageBarBox ul .pagNum').eq(i).removeClass('curCheck')
            };
            $('.pageBarBox ul .pagNum').eq(_this.n-1).addClass('curCheck');
        }
    };
    this.searchListConfig=function (cb1,urls1,keys,obj) {
        this.str=cb1;
        this.urls=urls1;
        this.switchKey=keys;
        this.dataParams=obj;
        this.n=1;
        this.initClass();
        this.setpage();
    }
}
var simperPag=new pagination();
var simperPag1=new pagination();
$(".pageBarBox").on('click','ul .pagNum',function(event){
    simperPag.n=$(this).attr("data-id");
    simperPag.initClass();
    simperPag.setpage();
});
$('#btnR').click(function(){
    if(simperPag.n<simperPag.pag){
        simperPag.n++;
    }else{
        return;
    }
    simperPag.initClass();
    simperPag.setpage();
});
$('#btnL').click(function(){
    if(simperPag.n==1){
        return;
    }else if(simperPag.n>1){
        simperPag.n--;
    }
    simperPag.initClass();
    simperPag.setpage();

});

html 

<div class="orderLeft fl">
    <h2>省</h2>
    <table class="mskTable">
        <thead>
            <tr>
                <td>编号</td>
                <td>省</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody id='resText'>
        </tbody>
    </table>
    <div class="pageBarBox fr">
        <ul>
            <li id="btnL" class="noallow"><</li>
            <li class="pagNum curCheck" data-id="1">1</li>
            <li class="pagNum" data-id="2">2</li>
            <li class="pagNum" data-id="3">3</li>
            <li class="pagNum" data-id="4">4</li>
            <li id="btnR">></li>
        </ul>
    </div>
</div>

css

.pageBarBox{
    margin-top: 33px;
    margin-bottom: 54px;
    padding-right: 8%;
}
.pageBarBox ul li{
    float: left;
    line-height: 24px;
    width: 24px;
    text-align: center;
    font-size: 12px;
    color: #666666;
    cursor: pointer;
}
.pageBarBox ul #btnL,.pageBarBox ul #btnR{
    font-size: 16px;
}
.pageBarBox ul .curCheck{
    background: #2fa5ff;
    color: #ffffff;
}
.pageBarBox ul .no_allow{
    color: #e6e6e6;
    cursor: not-allowed;
}