分页组件：列表通用显式翻页组件，可自定义列表模板、分页按钮
调用代码：
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"><</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">></a>
{{/if}}