分页组件：列表通用显式翻页组件，可自定义列表模板、分页按钮

调用代码：

var pages = require('../../../../modules/common/widget/page_control/page-control');
var page_obj = new pages
            ({
                container:$('[data-role="lists"]'),//列表插入父元素
                data:list_arr.result_data, //列表数据数组 list=[{},{},{}]
                default_index : 4, //默认索引 从0开始 超过最大值默认第一页
                index_btn_container : $('[data-role="page-index"]'),//索引插入父元素
                index_btn_trigger_show_lr_btn:3,//多少页时触发 上一页 下一页按钮
                index_btn_temp:__inline('../../../../modules/common/widget/page_control/index_btn.tmpl'),//索引模板
                list_temp:__inline('../../../../modules/common/widget/page_control/page-control.tmpl'),//列表模板
                per_page_amount:5,//每页列表显示的数据数量
                after_render : function(whiches)
                {                    //渲染完毕后调用该函数 whiches为self对象
                    //console.log(whiches);
                    $.each(whiches.view.find('[data-role="commit_stars"]'),function(i,obj)
                    {
                        trans_stars($(obj));
                    })
                },
                after_pre_act : function(whiches)
                {                    //前一页按钮调用后
                },
                after_next_act : function(whiches)
                {                    //后一页按钮调用后
                }

            })

源码：

//js
var $ = require('jquery');
var utility = require('../../utility/index');


// 定义函数对象
function page_control(options)
{
    var self = this;
    var options = options || {} ;
    self.render_ele = options.container || document.body ;
    self.render_index_ele = options.index_btn_container || document.body;
    self.render_data = options.data || {} ;
    self.after_next_act = options.after_next_act || function(){};
    self.after_render = options.after_render || function(){};
    self.after_pre_act = options.after_pre_act || function(){};
    self.btn_index_max = options.btn_index_max || 5;
    self.default_index = options.default_index || 0;
    self.index_btn_trigger_show_lr_btn = options.index_btn_trigger_show_lr_btn || 5 ;
    self.index_btn_temp = options.index_btn_temp || __inline('./index_btn.tmpl');
    self.list_temp = options.list_temp || __inline('./page-control.tmpl');
    self.per_page_amount = options.per_page_amount || 10 ;
    self.current_index = self.default_index;


    //  初始化
    self.init();
}

page_control.prototype =
{
    init : function() 
    {
        var self = this;
        self.render();
        // 安装事件
        self.setup_event();
    },
    setup_event:function()
    {
        var self = this;
    },
    after_show_event : function()
    {
        var self = this;

        $('[data-index]').on('click',function()
        {
            var con = $(this);

            var status = con.attr('data-index');

            switch (status)
            {
                case 'pre':self.pre_page();break;
                case 'next':self.next_page();break;
                default:self.current_index=parseInt(status);self.show_page(status);break;
            }

        })
    },

    render : function() 
    {
        var self = this;

        self.data_combine = self._data_init();

        self.index_data = self._index_init();

        self.show_page(self.current_index);
    },
    show_page : function(index)
    {
        var self = this;

        self.index_data = self._index_init();

        var str = self.list_temp({data:self.data_combine[index].list});

        var index_str = self.index_btn_temp({data:self.index_data});

        self.view = self.render_ele.html(str);

        self.index_view = self.render_index_ele.html(index_str);

        self.after_show_event();

        self.after_render(self);

    },
    next_page : function()
    {
        var self = this;

        self.show_page(++self.current_index);

        self.after_next_act(self);
    },
    pre_page : function()
    {
        var self = this;

        self.show_page(--self.current_index);

        self.after_pre_act(self);

    },
    _index_init : function()
    {
        var self = this;

        var pages = self.total_pages;

        var has_pre = true,
            has_next = true;


        if(self.current_index > pages)
        {
            self.current_index = 0;
        }


        if(self.current_index == 0)
        {
            has_pre = false;
            has_next = true;
        }
        if(self.current_index == pages-1)
        {
            has_pre = true;
            has_next = false;
        }
        if(self.index_btn_trigger_show_lr_btn > pages-1)
        {
            has_pre = false;
            has_next = false;
        }
        var index_btn =
        {
            has_pre:has_pre,
            has_next:has_next
        }

        var index_arr = [];

        for(var i = 0;i < pages;i++)
        {
            if(i == self.current_index)
            {
                index_arr.push({dex:i,num:i+1,cur:true})
            }
            else
            {
                index_arr.push({dex:i,num:i+1,cur:false})
            }

        }

        index_btn.list = index_arr

        //console.log(index_btn.list)

        return index_btn
    },
    _data_init : function()
    {
        var self = this;

        self.grouping_arr = [];

        var data = self.render_data;

        self.total_pages = Math.ceil(data.length/self.per_page_amount);

        for(var i =0 ; i < self.total_pages ; i++)
        {
            var obj =
            {
                list:[]
            };

            var num;

            data.length < self.per_page_amount? num = data.length:num = self.per_page_amount

            for(var k =0;k<self.per_page_amount;k++)
            {
                while(num)
                {
                    obj.list.push(data[0]);
                    data = data.slice(1,data.length);
                    num--;
                }
            }

            self.grouping_arr.push(obj);
        }



        //console.log(self.index_data);
        //console.log(self.grouping_arr);

        return self.grouping_arr
    }
}


return page_control;

模板：列表模板和索引模板

{{#each data}}
<div class="item clearfix">
    <div class="user-img">
        <div class="img"><a href="#"><img src="{{{avatar}}}" /></a></div>
        <p class="id-num">ID:{{{from_user_id}}}</p>
    </div>
    <div class="item-main">
        <div class="mod-star-item" data-role="commit_stars" data-stars="{{{rating}}}">
            <div class="icon none-star" data-role="stars">
                <div class="yellow none"></div>
            </div>
            <div class="icon none-star" data-role="stars">
                <div class="yellow none"></div>
            </div>
            <div class="icon none-star" data-role="stars">
                <div class="yellow none"></div>
            </div>
            <div class="icon none-star" data-role="stars">
                <div class="yellow none"></div>
            </div>
            <div class="icon none-star" data-role="stars">
                <div class="yellow none"></div>
            </div>
        </div>
        <div class="text-item">
            <p>{{{comment}}}</p>
        </div>
        <div class="info-item"><span class="name">{{{customer}}}</span><span class="date">{{{add_time}}}</span> </div>
    </div>
</div>
{{/each}}

{{#if data.has_pre}}
    <a title="上一页" data-index="pre">&lt;</a>
{{/if}}
{{#each data.list}}
    <a {{#if cur}}class="click"{{/if}} data-index="{{{dex}}}">{{num}}</a>
{{/each}}
{{#if data.has_next}}
    <a title="下一页" data-index="next">&gt;</a>
{{/if}}

转载于:https://my.oschina.net/u/2405644/blog/492331