自己封装的JS分页功能[用于搭配后台使用]

* 2017.5.11 增加了迭代回调功能，用于实现实时的页数展示与分页数据请求。

* 2016.7.03 修复bug，优化代码逻辑

* 2016.5.25 修复如果找不到目标对象的错误抛出。

* 2016.5.11 修复当实际页数（pageNumber）小于生成的页码间隔数时的bug

* 2016.4.3   实现原生JS分页功能

;
(function(root) {
    'use strict';

    function page(params) {

        this.dom = params.dom || null;
        this.fn = params.fn || null;
        this.padding = params.padding || 2;
        this.total = params.total;
        this.curpagenumber = params.curpagenumber || 0;
        this.detailed = params.detailed || null;

        this.cur = 1;
        this.start = 1;
        this.end = this.total;

        if (this.curpagenumber) {
            this.cur = this.curpagenumber;
        }

        this.dom && this.total && this.core();

    }
    page.prototype.core = function(curentPageNumber) {
        var a = [];

        if (curentPageNumber) {
            this.cur = curentPageNumber;
        }

        if (this.cur > 1) {
            a.push('<a href="javascript:;" class="prev">上一页</a>');
            this.detailed && a.push('<a href="javascript:;" class="first">首页</a>');
            a.push('...');
        }


        if (this.total > this.padding * 2 + 1) { //判断是否启用间隔数，如果总页数大于间隔数的2倍加1的话。
            if (this.cur <= this.padding) { // 如果当前页码小于间隔数
                this.start = 1;
                this.end = this.padding * 2 + 1;
            } else if (this.cur > this.padding && this.total >= this.cur + this.padding) { // 如果当前页码大于间隔数且总页数大于当前页面加上间隔数
                this.start = this.cur - this.padding;
                this.end = this.cur + this.padding;
            } else {
                this.start = this.total - this.padding * 2;
                this.end = this.total;
            }
        } else {
            this.start = 1,
                this.end = this.total;
        }


        for (; this.start <= this.end; this.start++) {
            if (this.cur != this.start) {
                a.push('<a href="javascript:;">' + this.start + '</a>');
            } else {
                a.push('<span class="cur">' + this.cur + '</span>');
            }
        }
        if (this.cur < this.total - 1) {
            a.push('...');
            this.detailed && a.push('<a href="javascript:;" class="last">尾页</a>');
        }
        if (this.cur < this.total) {
            a.push('<a href="javascript:;" class="next">下一页</a>');
        }


        this.dom.innerHTML = a.join('');
        this.bind();
    };

    page.prototype.bind = function() {
        var _this = this;

        this.dom.onclick = function(event) {
            var event = event || window.event,
                src = event.srcElement || event.target;

            if (src.nodeName == 'A') {
                switch (src.className) {
                    case '':
                        _this.cur = parseInt(src.innerHTML);
                        break;
                    case 'prev':
                        _this.cur = --_this.cur;
                        break;
                    case 'next':
                        _this.cur = ++_this.cur;
                        break;
                    case 'last':
                        _this.cur = _this.total;
                        break;
                    case 'first':
                        _this.cur = 1;
                }
                _this.fn && _this.fn(_this.cur);
                _this.core();
            }
        };

    };

    root.page = page;

})(window);

一般使用方式：

page({
    'dom':document.getElementById('page'),
    'total':13,
    'padding':2,
    'fn':function(cur){
        console.log(cur);
    }
});
/* {} 是一个参数对象，其参数详细如下：
    |- dom      ：一个dom对象，用于保存生成的页码。
    |- total    : 总页数。
    |- padding  : 生成的间隔,默认间隔为2个。
    |- detailed : 是否出现首页及尾页
    |- fn       : 当前页码的回调函数。
*/

高级使用方式：在接口中回调

function getData(pageNum) {
    $.post('data.htm', {
        'pageNumber': pageNum
    }, function(data) {
        if (data.errorCode === 0) {
            page({
                dom: document.querySelectorAll('.pages')[0],
                total: data.total,
                curpagenumber: pageNum,
                fn: function(num) {
                    getData(num);
                }
            });
        }
    })
}