<!--分页模板-->
<script type="text/template" id="tpl_pager">
<a data-index="[%= index %]" title="[%= title %]"
class="[% if(current){ %]current [% } %][%= addclass %]">[%= text %]</a>
</script>
//model
var PagerModel = Backbone.Model.extend({
defaults:{
page:17,
total:20
}
});
//翻页视图
window.Pager = Backbone.View.extend({
el:"#pager",
template: "tpl_pager",
initialize:function(){
_.bindAll(this,"handlePager");
this.listenTo(this.model,"change",this.render);
},
events:{
"click a" : "handlePager"
},
//处理页码点击事件
handlePager: function(e){
var $s = $(e.target);
if($s.hasClass("dot") || $s.hasClass("current")){
return;
}
var page = parseInt($s.attr("data-index"));
var data = {
action: "prosource",
meetid: mMeeting.meetid,
page: page
};
//请求产品列表
$.getJSON(mMeeting.url, data,function(data){
proSources.add(data.data); //保存检索到的数据
//获取数据成功 更新DOM
new EJS({element:"tpl_pro_item"}).update(mMeeting.sourceid,{data:data.data});
//设置页码
mPager.set({page:page,total:data.total});
});
//console.log(e.target);
},
render: function(){
var page = this.model.get("page"), //当前页码
total = this.model.get("total"); //总页数
var show = 5; //显示几个页码控制块
var start = Math.ceil(page-show/2)<1?1:Math.ceil(page-show/2); //起始页码
var end = Math.ceil(page+show/2-1)>total?total:Math.ceil(page+show/2-1); //结束
var html = '';
if(page>1){ //显示上一页
html += this.tpl(page-1,false,"prev","<","上一页");
}
if(start > 1){
html += this.tpl(1,false,"item",1,"第1页"); //显示第一页
}
if(start > 2){
html += this.tpl(1,false,'dot', '...','');
}
for(var i=start; i<=end; i++){ //显示中间页码
html += this.tpl(i,(page==i?true:false),'item',i,"第"+i+"页");
}
if(end<total-1){
html += this.tpl(1,false,'dot', '...','');
}
if(end < total){ //显示最后一页
html += this.tpl(total,false,"item",total,"第"+total+"页"); //显示第一页
}
if(page<total-1){ //显示下一页
html += this.tpl(page+1,false,"next",">","下一页");
}
this.$el.html(html);//添加dom到页面
},
tpl: function(index,current,addclass,text,title){
var data = {
index:index, //页码
current: current, //是否是当前页
addclass:addclass, //要添加的class
text:text, //显示的文本
title: title //title属性文字
};
return new EJS({element:this.template}).render(data);
}
});
window.mPager = new PagerModel;
var pager= new Pager({model:mPager});
pager.render();
//////////////////
console 测试代码 mPager.set({page:3})