分页效果

page.png

实现

html

<div class="pagediv"></div>

<script>
$(".pagediv").createPage({
         pageNum:100,//总页码
         current: 1,//当前页码
         backfun: function (e) {
           //页面跳转的操作
         }
});
</script>

css


div.pagediv {
    text-align: center;
    color: #999999;
}

div.pagediv a {
    text-decoration: none;

}

div.pagediv span,
div.pagediv a {
    display: inline-block;
    box-sizing: border-box;
}

.current {
    color: #ffffff;
    background: #0168fa;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
}

.zxfPagenum {
    color: #666;
    background: #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    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;
}

jquery

(function ($) {
    var zp = {
        init: function (obj, pageinit) {
            return (function () {
                zp.addhtml(obj, pageinit);
                obj.off(); // 加上这句,每次调用都会清除之前的事件委托
                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 = pageinit.current + 2;
                } else if (pageinit.current > 4 && pageinit.current > pageinit.pageNum - 5) {
                    var start = pageinit.pageNum - 4,
                        end = pageinit.pageNum;
                } else {
                    var start = 1,
                        end = 9;
                }
                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" value="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));