分页模块

一 功能描述

先贴上最终的效果图：

首页/尾页/上一页/下一页 的功能就不用我具体解释了吧：）

中间固定显示11个页码（这个数字是用下面代码中的常量DISPLAY_NUM决定的），根据点击的页码数字 a ，分页的变化情况有三种：

(1) 1 <=a <= 5 ，显示效果如上图所示。
(2) 6 <=a <= l-4, 其中l表示总的页码数，效果如下图：
(3) l-4 <=a <= l, 效果图如下：

二 代码

• html 部分

<div class="pages"></div>

• js 部分

define([],function(){
    var tpl = '<a class="prev first-page" href="javascript:;"><em>&lt;</em>首页</a>\
                <a class="prev prev-page {{prev_d}}" href="javascript:;" {{prev_d}}><em>&lt;</em>上一页</a>\
                    {{#total_arr}}\
                    <a class="num {{#cur}}{{cur}}{{/cur}}" {{#cur}}title="{{value}}"{{/cur}} data-value="{{value}}" href="javascript:void(0);">{{num}}</a>\
                    {{/total_arr}}\
                <a class="next next-page {{next_d}}" href="javascript:;" {{next_d}}>下一页<em>&gt;</em></a></div>\
                <a class="next last-page" href="javascript:;" data-value="{{total_value}}">尾页<em>&gt;</em></a></div>',
 
        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代码部分注释