JS 之 分页

主要思路

1. 根据总条数 和 每页数量计算 总页数;
2. 无省略页码, 如果总页数 <= 分页按钮数量, 则按实际页数输出按钮;
3. 省略页面码在前, 如果当前页 为 最后3页, 则起始页 = 总页数 - 分页按钮数量 + 1,起始页的下一页为省略页码;
4. 省略页面码在后, 如果当前页 为 分页按钮数量 - 2,不是最后两个按钮上, 则 倒数第二个按钮为省略页码,最后一个按钮为最后一页;
5. 否则省略页码存在于两端, 第二个和倒数第二个按钮为省略按钮, 第一个和倒数第一个, 分别为第一页和最后一页, 当前页 位于剩余按钮的中间, 所以左右按钮分别为当前页递减递增;

调用

new Page(el,{count:8}).setPage({current:1,pageSize:10,total:100})

全文

var Page = function(el, options) {
    var defaults = {
        current: 1,   // 当前页
        total: 0,     // 总页数
        count: 8,     // 分页按钮数量 // 至少为7个按钮
        pageSize: 10  // 每页的数量，如每页10条
    };
    this.html = [];
    this.item = '<li data-index="@page"><a>@page</a></li>';  // 正常页码
    this.itemActive = '<li class="active" data-index="@page"><span>@page</span></li>';  // 当前页,激活页
    this.itemDis = '<li class="disabled more"><span>...</span></li>';     // 省略页码
    this.itemPrev = '<li data-index="prev" class="@dis"><a>«</a></li>';   // 上一页
    this.itemNext = '<li data-index="next"  class="@dis"><a>»</a></li>';  // 下一页
    this.option = $.extend(defaults, options);

    this.el = el;   // 插入页码的容器
    this.once();
}
Page.prototype.replace = function(str, page) {
    return str.replace(/@page/g, page);
}
Page.prototype.normal = function() {
    for (var i = 1; i <= this.option.total; i++) {
        if (this.option.current == i) {
            this.html.push(this.replace(this.itemActive, i));
            continue;
        }
        this.html.push(this.replace(this.item, i));
    }
}
Page.prototype.before = function() {
    var start = this.option.total - this.option.count + 1;
    for (var i = start; i <= this.option.total; i++) {
        if (this.option.current == i) {
            this.html.push(this.replace(this.itemActive, i));
            continue;
        }
        if (i == start) {
            this.html.push(this.replace(this.item, 1));
            continue;
        }
        if (i == start + 1) {
            this.html.push(this.replace(this.itemDis, i));
            continue;
        }
        this.html.push(this.replace(this.item, i));
    }
}
Page.prototype.after = function() {
    for (var i = 1; i <= this.option.count; i++) {
        if (this.option.current == i) {
            this.html.push(this.replace(this.itemActive, i));
            continue;
        }
        if (i == this.option.count - 1) {
            this.html.push(this.replace(this.itemDis, i));
            continue;
        }
        if (i == this.option.count) {
            this.html.push(this.replace(this.item, this.option.total));
            continue;
        }
        this.html.push(this.replace(this.item, i));
    }

}
Page.prototype.justify = function() {
    this.html.push(this.replace(this.item, 1));
    this.html.push(this.itemDis);
    var start, end, diss;
    if ((this.option.count - 4) % 2) {
        diss = (this.option.count - 4 - 1) / 2;
        start = this.option.current - diss;
        end = this.option.current + diss;
    } else {
        diss = (this.option.count - 4) / 2;
        start = this.option.current - diss;
        if (start == 2) {
            start = this.option.current - diss + 1;
            end = this.option.current + diss;
        } else {
            end = this.option.current + diss - 1;
        }

    }

    for (var i = start; i <= end; i++) {
        if (this.option.current == i) {
            this.html.push(this.replace(this.itemActive, i));
            continue;
        }
        this.html.push(this.replace(this.item, i));
    }
    this.html.push(this.itemDis);
    this.html.push(this.replace(this.item, this.option.total));
}
Page.prototype.judge = function() {
    if (this.option.total <= this.option.count) {
        this.normal();
        return;
    }
    if (this.option.current > this.option.total - (this.option.count - 3)) {
        this.before();
        return;
    }
    if (this.option.current < this.option.count - 2) {
        this.after();
        return;
    }
    this.justify();
}
Page.prototype.once = function() {

    this.setPage({ current: this.option.current });
    var _this = this;
    $(this.el).on('click', 'li', function() {
        var _page = $(this).data('index');
        if (_page == 'prev') _page = _this.option.current - 1;
        if (_page == 'next') _page = _this.option.current + 1;
        if (!_page) return;
        if (_page == _this.option.current) return;

        _this.setPage({ current: _page });

        $(_this.el).trigger("change", [_page]);

    });
}

Page.prototype.setPage = function(setpage) {
    if (!setpage || !setpage.current) {
        console.error('current page undefined');
        return;
    }

    this.option.current = setpage.current;
    if (setpage.pageSize) this.option.pageSize = setpage.pageSize;
    if (setpage.total) this.option.total = Math.ceil(setpage.total / this.option.pageSize);
    this.html = [];
    this.judge();
    var prev = setpage.current == 1 ? this.itemPrev.replace(/@dis/g, 'disabled') : this.itemPrev.replace(/@dis/g, '');
    var next = setpage.current == this.option.total ? this.itemNext.replace(/@dis/g, 'disabled') : this.itemNext.replace(/@dis/g, '');

    var html = '<ul class="pagination">' + prev + this.html.join('') + next + '</ul>';
    if (!this.option.total) {
        $(this.el).addClass('hide');
        return
    } else {
        $(this.el).removeClass('hide');
    }
    if ($(this.el).find('.pagination').length) {
        $(this.el).find('.pagination').html(html);
    } else {
        $(this.el).html(html);
    }


}