jquery分页js和css代码

css文件

div.zxf_pagediv{
    text-align: center;
    color: #999999;
    padding: 20px 20px 40px 0;
}
div.zxf_pagediv a{
    text-decoration: none;
    
}
div.zxf_pagediv span,div.zxf_pagediv a{
    display: inline-block;
    box-sizing: border-box;
}
.current{
    color: #ffffff;
    background: #1ABC9C;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
}
.zxfPagenum{
    color: #666;
    background: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 5px;
    border-radius: 3px;
}
.nextpage{

    margin: 0 5px;
}
.nextbtn,.prebtn,span.disabled{
    color: #666;
    background: #fff;
    width: 88px;
    height: 42px;
    line-height: 42px;
    border-radius: 3px;
}
.zxfinput{
    width: 50px;
    height: 42px;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #E6E6E6;
    margin: 0 12px;
    border-radius: 3px;
    color: #666;
}
.zxfokbtn{
    width: 48px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #E6E6E6;
    margin-left: 10px;
    cursor:pointer;
    border-radius: 3px;
    background: #fff;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}

js文件

(function($){
    var zp = {
        init:function(obj,pageinit){
            return (function(){
                zp.addhtml(obj,pageinit);
                zp.bindEvent(obj,pageinit);
            }());
        },
        addhtml:function(obj,pageinit){
            return (function(){
                obj.empty();
                /*上一页*/
                if (pageinit.current > 1) {
                    obj.append('<a href="javascript:;" class="prebtn">上一页</a>');
                } else{
                    obj.remove('.prevPage');
                    obj.append('<span class="disabled">上一页</span>');
                }
                // /*中间页*/
                // if (pageinit.current >4 && pageinit.pageNum > 4) {
                //  obj.append('<a href="javascript:;" class="zxfPagenum">'+1+'</a>');
                //  obj.append('<a href="javascript:;" class="zxfPagenum">'+2+'</a>');
                //  obj.append('<span>...</span>');
                // }
                if (pageinit.current >4 && pageinit.current <= pageinit.pageNum-5) {
                    var start  = pageinit.current - 2,end = start + 4;
                }else if(pageinit.current >4 && pageinit.current > pageinit.pageNum-5){
                    var start  = pageinit.pageNum - 4,end = pageinit.pageNum;
                }else{
                    var start = 1,end = 5;
                }
                for (;start <= end;start++) {
                    if (start <= pageinit.pageNum && start >=1) {
                        if (start == pageinit.current) {
                            obj.append('<span class="current">'+ start +'</span>');
                        } else if(start == pageinit.current+1){
                            obj.append('<a href="javascript:;" class="zxfPagenum nextpage">'+ start +'</a>');
                        }else{
                            obj.append('<a href="javascript:;" class="zxfPagenum">'+ start +'</a>');
                        }
                    }
                }
                // if (end < pageinit.pageNum) {
                //  obj.append('<span>...</span>');
                // }
                /*下一页*/
                if (pageinit.current >= pageinit.pageNum) {
                    obj.remove('.nextbtn');
                    obj.append('<span class="disabled">下一页</span>');
                } else{
                    obj.append('<a href="javascript:;" class="nextbtn">下一页</a>');
                }
                /*尾部*/
                obj.append('<span>'+'共'+'<b>'+pageinit.pageNum+'</b>'+'页，'+'</span>');
                obj.append('<span>'+'到第'+'<input type="number" class="zxfinput" placeholder="5" />'+'页'+'</span>');
                obj.append('<span class="zxfokbtn">'+'确定'+'</span>');
            }());
        },
        bindEvent:function(obj,pageinit){
            return (function(){
                obj.on("click","a.prebtn",function(){
                    var cur = parseInt(obj.children("span.current").text());
                    var current = $.extend(pageinit, {"current":cur-1});
                    zp.addhtml(obj,current);
                    if (typeof(pageinit.backfun)=="function") {
                        pageinit.backfun(current);
                    }
                });
                obj.on("click","a.zxfPagenum",function(){
                    var cur = parseInt($(this).text());
                    var current = $.extend(pageinit, {"current":cur});
                    zp.addhtml(obj,current);
                    if (typeof(pageinit.backfun)=="function") {
                        pageinit.backfun(current);
                    }
                });
                obj.on("click","a.nextbtn",function(){
                    var cur = parseInt(obj.children("span.current").text());
                    var current = $.extend(pageinit, {"current":cur+1});
                    zp.addhtml(obj,current);
                    if (typeof(pageinit.backfun)=="function") {
                        pageinit.backfun(current);
                    }
                });
                obj.on("click","span.zxfokbtn",function(){
                    var cur = parseInt($("input.zxfinput").val());
                    var current = $.extend(pageinit, {"current":cur});
                    zp.addhtml(obj,{"current":cur,"pageNum":pageinit.pageNum});
                    if (typeof(pageinit.backfun)=="function") {
                        pageinit.backfun(current);
                    }
                });
            }());
        }
    }
    $.fn.createPage = function(options){
        var pageinit = $.extend({
            pageNum : 15,
            current : 1,
            backfun : function(){}
        },options);
        zp.init(this,pageinit);
    }
}(jQuery));

前端使用

<div class="zxf_pagediv"></div>

// //翻页
            $(".zxf_pagediv").createPage({
                pageNum: 20,
                current: 1,
                backfun: function(e) {
                    console.log(e);//回调
                }
            });