why_in_h5/portal/js/page.js

function Paging(element, options) {
    this.element = element;
    this.options = {
        pageNum: options.pageNum || 1,
        totalNum: options.totalNum,
        totalList: options.totalList,
        pageRows: options.pageRows,
        pageSizes: options.pageSizes,
        callback: options.callback
    };
    this.init();
}

Paging.prototype = {
    constructor: Paging,
    init: function() {
        this.createHtml();
        this.bindEvent();
    },
    createHtml: function() {
        var me = this;
        var content = [];
        var pageNum = me.options.pageNum;
        var totalNum = me.options.totalNum;
        var totalList = me.options.totalList;
        var pageRows = me.options.pageRows;
        var pageSizes = me.options.pageSizes;
        var selecthtml = ""
        for (var i = 0; i < pageSizes.length; i++) {
            if (pageRows == pageSizes[i]) {
                selecthtml += '<option value=' + pageSizes[i] + ' selected>' + pageSizes[i] + '条/页</option>'
            } else {
                selecthtml += '<option value=' + pageSizes[i] + '>' + pageSizes[i] + '条/页</option>'
            }
        }
        content.push("<span class='totalList'> 共 " + totalList + " 条 </span><select id='page-sizes'>" + selecthtml + "</select><button type='button' id='firstPage'>首页</button><button type='button' id='prePage'>上一页</button>");
        if (totalNum > 6) {
            if (pageNum < 5) {
                for (var i = 1; i < 6; i++) {
                    if (pageNum !== i) {
                        content.push("<button type='button'>" + i + "</button>");
                    } else {
                        content.push("<button type='button' class='current'>" + i + "</button>");
                    }
                }
                content.push(". . .");
                content.push("<button type='button'>" + totalNum + "</button>");
            } else {
                if (pageNum < totalNum - 3) {
                    for (var i = pageNum - 2; i < pageNum + 3; i++) {
                        if (pageNum !== i) {
                            content.push("<button type='button'>" + i + "</button>");
                        } else {
                            content.push("<button type='button' class='current'>" + i + "</button>");
                        }
                    }
                    content.push(". . .");
                    content.push("<button type='button'>" + totalNum + "</button>");
                } else {
                    content.push("<button type='button'>" + 1 + "</button>");
                    content.push(". . .");
                    for (var i = totalNum - 4; i < totalNum + 1; i++) {
                        if (pageNum !== i) {
                            content.push("<button type='button'>" + i + "</button>");
                        } else {
                            content.push("<button type='button' class='current'>" + i + "</button>");
                        }
                    }
                }
            }
        } else {
            for (var i = 1; i < totalNum + 1; i++) {
                if (pageNum !== i) {
                    content.push("<button type='button'>" + i + "</button>");
                } else {
                    content.push("<button type='button' class='current'>" + i + "</button>");
                }
            }
        }
        content.push("<button type='button' id='lastPage'>尾页</button><button type='button' id='nextPage'>下一页</button>");
        content.push("前往<input type='text' id='text' value='" + pageNum + "'></input>页");
        content.push("<span class='totalNum'> 共 " + totalNum + " 页 </span>");
        me.element.html(content.join(''));
        setTimeout(function() {
            me.dis();
        }, 20);
    },
    bindEvent: function() {
        var me = this;

        function handleSizeChange(data) {
            var id = $(data).attr('id');
            var num = parseInt($(data).html());
            var pageNum = me.options.pageNum;
            if (id === 'prePage') {
                if (pageNum !== 1) {
                    me.options.pageNum -= 1;
                }
            } else if (id === 'nextPage') {
                if (pageNum !== me.options.totalNum) {
                    me.options.pageNum += 1;
                }
            } else if (id === 'firstPage') {
                if (pageNum !== 1) {
                    me.options.pageNum = 1;
                }
            } else if (id === 'lastPage') {
                if (pageNum !== me.options.totalNum) {
                    me.options.pageNum = me.options.totalNum;
                }
            } else if (id === 'page-sizes') {
                if (pageNum !== 1) {
                    me.options.pageNum = 1;
                }
            } else if (id === 'text') {
                var val = Number($("#text").val())
                if (val < 1 || isNaN(val)) {
                    me.options.pageNum = 1
                } else if (val > me.options.totalNum) {
                    me.options.pageNum = me.options.totalNum
                } else {
                    me.options.pageNum = val
                }
            } else {
                me.options.pageNum = num;
            }
            $("#text").val(me.options.pageNum)
            me.options.pageRows = Number($("#page-sizes").val())
            me.createHtml();
            if (me.options.callback) {
                me.options.callback(me.options.pageNum, me.options.pageRows);
            }
        }
        me.element.off('click', 'button');
        me.element.on('click', 'button', function() {
            handleSizeChange(this)
        });
        me.element.off('change', 'select');
        me.element.on('change', 'select', function() {
            handleSizeChange(this)
        });
        me.element.off('change', 'input');
        me.element.on('change', 'input', function() {
            handleSizeChange(this)
        });
    },
    dis: function() {
        var me = this;
        var pageNum = me.options.pageNum;
        var totalNum = me.options.totalNum;
        if (totalNum === 1) {
            me.element.children('#firstPage, #prePage').prop('disabled', true);
            me.element.children('#lastPage, #nextPage').prop('disabled', true);
        } else {
            if (pageNum === 1) {
                me.element.children('#firstPage, #prePage').prop('disabled', true);
            } else if (pageNum === totalNum) {
                me.element.children('#lastPage, #nextPage').prop('disabled', true);
            }
        }
    }
};
$.fn.paging = function(options) {
    return new Paging($(this), options);
};