带省略的分页

这个ajax分页是基本jquery来实现的，足以满足正常需求。。。

效果：

HTML：

CSS：

.zh-page{height: 20px;padding: 20px 0;text-align: right;}
.zh-page ul{display: inline-block;height: 20px;}
.zh-page ul li{float: left;height: 20px;line-height: 20px;margin: 0 3px;color: #fff;font-size: 14px;}
.zh-page ul li a{display: block;height: 100%;min-width: 10px;border-radius: 10px;padding: 0 5px;color: #fff;}
.zh-page ul .zh-cur a{background-color: #4DDDF2;color: #1c1c1c;}
.zh-page .zh-icon-prev,
.zh-page .zh-icon-next{display: inline-block;width: 0;height: 0;border-style: solid;border-width: 4px 6px;border-color: transparent #858587 transparent transparent;}
.zh-page .zh-icon-next{border-color: transparent transparent transparent #858587;}

JS：

$.extend({
    // ajax分页
    page: function(options) {
        var defaults = {
            "visiblePages": 6 // 可见页码(不能小于4)
        };
        var opts = $.extend({}, defaults, options);
        var curPage = opts.curPage;
        // 创建分页列表
        function createPageList(curPage) {
            var li = "
";
            if(opts.totalPages <= opts.visiblePages) { // 总页数<=可见页
                for(var i=1; i<=opts.totalPages; i++) {
                    if(curPage == i) {
                        li += "
"+i+"
";
                    } else {
                        li += "
"+i+"
";
                    }
                }
            } else { // 总页数>可见页
                if(curPage < opts.visiblePages-1) { // 当前页<可见页-1
                    for(var i=1; i<=opts.visiblePages-1; i++) {
                        if(curPage == i) {
                            li += "
"+i+"
";
                        } else {
                            li += "
"+i+"
";
                        }
                    }
                    li += "
...
";
                    li += "
"+opts.totalPages+"
";
                } else if(curPage >= opts.visiblePages-1) {  // 当前页>=可见页-1
                    if(opts.totalPages-curPage <= opts.visiblePages-4) { // 能连到结束
                        li += "
1
";
                        li += "
...
";
                        for(var i=opts.totalPages-(opts.visiblePages-2); i<=opts.totalPages; i++) {
                            if(curPage == i) {
                                li += "
"+i+"
";
                            } else {
                                li += "
"+i+"
";
                            }
                        }
                    } else { // 不能连到结束
                        li += "
1
";
                        li += "
...
";
                        for(var i=curPage-(opts.visiblePages-4); i<=curPage+1; i++) {
                            if(curPage == i) {
                                li += "
"+i+"
";
                            } else {
                                li += "
"+i+"
";
                            }
                        }
                        li += "
...
";
                        li += "
"+opts.totalPages+"
";
                    }
                }
            }
            li += "
";
            li += "
共"+opts.totalPages+"页
";
            $(opts.ele).html(li);
        }
        createPageList(curPage);
        // 点击页码
        $(opts.ele).off("click");
        $(opts.ele).on("click", "li:not(.zh-prev, .zh-next, .zh-total, .zh-ellipsis)", function() {
            curPage = +$(this).text();
            $(this).addClass("zh-cur").siblings().removeClass("zh-cur");
            createPageList(curPage);
            if(opts.change && typeof opts.change === "function") {
                opts.change.call(null, curPage);
            }
        });
        // 点击前一页
        $(opts.ele).on("click", ".zh-prev", function() {
            curPage = +$(opts.ele).children(".zh-cur").text();
            curPage--;
            if(curPage < 1) return;
            createPageList(curPage);
            if(opts.change && typeof opts.change === "function") {
                opts.change.call(null, curPage);
            }
        });
        // 点击后一页
        $(opts.ele).on("click", ".zh-next", function() {
            curPage = +$(opts.ele).children(".zh-cur").text();
            curPage++;
            if(curPage > opts.totalPages) return;
            createPageList(curPage);
            if(opts.change && typeof opts.change === "function") {
                opts.change.call(null, curPage);
            }
        });
    }
});

调用：

$.page({
    ele: ".zh-page ul",
    curPage: 1, // 当前页
    visiblePages: 5, // 可见页码
    change: function(num) { // 回调
        // alert(num);
    },
    totalPages: 20 // 总页数
});