", default_event_handlers = { to_page: function (e, cur) { return true; }, prev_page: function (e, cur) { return true; }, next_page: function (e, cur) { return true; }, first_page: function (e, cur) { return true; }, last_page: function (e, cur) { return true; } }, DISPLAY_NUM = 11, pages = { /** * * @param {type} opt * { * wrp * that: event_handlers函數調用上下文，默認情況下為this * events: { "to_page": function(event, cur){}, "prev_page": function(evnet, cur){}, "next_page": function(event, cur){}, "first_page": function(event, cur){}, "last_page": function(event, cur){}, } * } * @returns {undefined} */ init: function(opt){ var event_handlers = $.extend({}, default_event_handlers, opt.events), _this = opt.that||this, _that = this; $(opt.wrp).on("click", ".pages .prev-page", function(e){ var before_p = $(this).closest(".pages").find(".cur").data("value"), total_p = $(this).siblings(".last-page").data("value"); before_p = parseInt(before_p); total_p = parseInt(total_p); if (before_p == 1) { return; } var cur = before_p - 1; event_handlers.prev_page.call(_this, e, cur); _that.render(cur, total_p); }).on("click", ".pages .next-page", function(e){ var before_p = $(this).closest(".pages").find(".cur").data("value"), total_p = $(this).next().data("value"); before_p = parseInt(before_p); total_p = parseInt(total_p); if (before_p == total_p) { return; } var cur = before_p + 1; event_handlers.next_page.call(_this, e, cur); _that.render(cur, total_p); }).on("click", ".pages .num", function(e){ var before_p = $(this).closest(".pages").find(".cur").data("value"), total_p = $(this).siblings(".last-page").data("value"), cur = $(this).data("value"); before_p = parseInt(before_p); total_p = parseInt(total_p); cur = parseInt(cur); if (before_p == cur) { return; } event_handlers.to_page.call(_this, e, cur); _that.render(cur, total_p); }).on("click", ".pages .first-page", function(e){ var before_p = $(this).closest(".pages").find(".cur").data("value"), total_p = $(this).siblings(".last-page").data("value"); before_p = parseInt(before_p); total_p = parseInt(total_p); if (before_p == 1) { return; } var cur = 1; event_handlers.first_page.call(_this, e, cur); _that.render(cur, total_p); }).on("click", ".pages .last-page", function(e){ var before_p = $(this).closest(".pages").find(".cur").data("value"), total_p = $(this).data("value"); before_p = parseInt(before_p); total_p = parseInt(total_p); if (before_p == total_p) { return; } var cur = total_p; event_handlers.last_page.call(_this, e, cur); _that.render(cur, total_p); }); }, /** * * @param {type} opt * total * cur * @returns {undefined} */ render: function(cur, total){ if (total == 0) { $(".pages").html(""); return; } var total_arr = this.set_total_array(total, cur), prev_d = (cur == 1) ? "disabled" : "", next_d = (cur == total) ? "disabled" : "", content = Mustache.render(tpl, { prev_d: prev_d, next_d: next_d, total_value: total, total_arr: total_arr }); $(".pages").html(content); }, set_total_array: function(total, current){ var total_arr = [], begin_index = 1, end_index = total, begin_threshold = Math.floor(DISPLAY_NUM/2), end_threshold = total + 1 - begin_threshold; if (total <= DISPLAY_NUM) { end_index = total; } else if (current <= begin_threshold) { end_index = DISPLAY_NUM; } else if (current >= end_threshold) { begin_index = total + 1 - DISPLAY_NUM; } else { begin_index = current - begin_threshold; end_index = current + begin_threshold; } for (var i = begin_index; i <= end_index; i++) { var item = {num: i, value: i}; if (current == i) { item.cur = "cur"; } total_arr.push(item); } return total_arr; }, }; return pages; });

css 部分

.pages{
    text-align: center;
    padding: 20px 0;

    .prev,.next {
        width: auto;
        background: transparent;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    a{
        display: inline-block;
        width: 18px;
        height: 18px;
        line-height: 18px;
        border-radius: 3px;
        text-align: center;
        color: #333;
        font-size: 14px;
        vertical-align: top;
        margin-right: 15px;
    }

    .cur{
        background-color: #3b9bf5;
        color: white;
        text-decoration: none;
        cursor: default;
    }

    .omit{
        margin: 0;
    }

    .clear-margin{
        margin-left: -15px;
    }

    .disabled{
        opacity: 0.6;
    }
}

三 使用示例

模板頁面

控制器

首先初始化：
然后在渲染：
init和render倆函數的參數見js代碼部分注釋