一 功能描述
先贴上最终的效果图：
首页/尾页/上一页/下一页 的功能就不用我具体解释了吧：）
中间固定显示11个页码（这个数字是用下面代码中的常量
DISPLAY_NUM决定的），根据点击的页码数字 a ，分页的变化情况有三种：(1) 1 <=a <= 5 ，显示效果如上图所示。
(2) 6 <=a <= l-4, 其中l表示总的页码数，效果如下图：(3) l-4 <=a <= l, 效果图如下：
二 代码
html 部分
js 部分
define([],function(){ var tpl = '<首页\ <上一页\ { {#total_arr}}\ { {num}}\ { {/total_arr}}\ 下一页>\ 尾页>', 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代码部分注释
