Backbone 自制分页组件
文件有：pagination.js 分页逻辑 paginationModel 分页数据模型 pagination.html html模版
pagination.js 相关代码
define(function (require, exports, modules) {
'use strict';
var tpl = require('text!./pagination.html');
var view = Backbone.View.extend({
template: _.template(tpl),
events:{
'click li,.page-btn':'changePageTrigger',
'blur .unify-page-size input':'changePageSize',
'click .unify-page-goto button':'gotoPageNum',
'keypress .unify-page-size input':'keySizeChange',
'keypress .unify-page-goto input':'keyNumChange'
},
initialize: function () {
_.bindAll(this,'changePageTrigger','changePageSize','gotoPageNum','keySizeChange','keyNumChange');
this.listenTo(this.model, 'change', this.render);
},
render: function () {
// 初始化viewer 并渲染
this.$el.html(this.template(this.model.toJSON()));
return this;
},
changePageTrigger:function(e){
e.preventDefault();
var self = $(e.currentTarget);
var pageNum = '';
if(self.hasClass('disabled')) return false;
if(self.hasClass('page-num')){
pageNum = self.text();
}else if(self.hasClass('previous')){
pageNum = this.model.get('pageNum')-1;
}else if(self.hasClass('next')){
pageNum = this.model.get('pageNum') + 1;
}
this.gotoPageNum(Number(pageNum));
},
keySizeChange:function(event){
if(event.keyCode == "13")
{
this.changePageSize(event);
}
},
keyNumChange:function(event){
if(event.keyCode == "13")
{
this.gotoPageNum();
}
},
changePageSize:function(event){ //更改页面页数大小
var self = $(event.currentTarget);
if(self.val() > 1000000000){
unifyComponent.unifyWarn("每页条数不能超过10亿");
return false;
}
if(self.val()!="" && (!/^[0-9]*$/.test(self.val()))){ // 验证数字
unifyComponent.unifyWarn("每页条数必须是整数");
return false;
}
if(self.val() == 0){
unifyComponent.unifyWarn("每页条数不能为0");
return false;
}
if(this.model.get('pageSize') != self.val()){
var pageCount = Math.ceil(this.model.get('totalCount') / self.val());
var json = _.extend({},this.model.toJSON(),{pageCount:pageCount,pageSize:self.val()});
this.model.setBeforeHandle(json,true);
this.trigger('page', this.model.toJSON()); // 触发函数
}
},
gotoPageNum:function(pageNum){ //更改页面当前页
var page = _.isNumber(pageNum) ? pageNum : parseInt(this.$el.find('.unify-page-goto input').val());
if(page > 1000000000){
unifyComponent.unifyWarn("输入页数不能超过10亿");
return false;
}
if(page!="" && (!/^[0-9]*$/.test(page))){ // 验证数字
unifyComponent.unifyWarn("页数必须是整数");
return false;
}
if(!page || page > this.model.get('pageCount')){
unifyComponent.unifyWarn('输入错误超过总页数或者没输入');
return false;
}
var json = _.extend({},this.model.toJSON(),{pageNum:page});
this.model.setBeforeHandle(json);
this.trigger('page', this.model.toJSON()); // 触发函数
}
});
return view;
});
paginationModel 对应代码
/**
* Created by carey on 16/6/28.
*/
define(function (require, exports, modules) {
'use strict';
var Model = Backbone.Model.extend({
defaults:{
first:false,//第一页
last:true, //最后一页
prev:false,//上一页
next:true,//下一页
hasPrevMore:false, //是否有上一页
hasNextMore:false, //是否有下一页
visiblePages:5,// 展示页数宽带
startPage:1,
pageNum:1,
pageSize:10,
totalCount:0,
pageCount:-1
},
getRequestPage:function(flag){
var page = {};
if(flag){
this.set({pageNum:1,startPage:1},{silent:false});
}
page.pageNum = this.get('pageNum');
page.pageSize = this.get('pageSize');
// page.pageCount = this.get('pageCount');
return {page:page};
},
setBeforeHandle:function(json){
if( (json.pageNum == this.get('pageNum') && json.pageSize == this.get('pageSize') && json.pageCount == this.get('pageCount') && json.totalCount == this.get('totalCount'))){
return false;
}
json.prev = !(json.pageNum == 1);
json.next = !(json.pageNum == json.pageCount);
if(json.visiblePages >= json.pageCount || json.pageCount < 5){
json.visiblePages = json.pageCount;
json.hasPrevMore = false;
json.hasNextMore = false;
this.set(json);
return false;
}else{
json.visiblePages = 5;
}
if((json.pageNum + json.visiblePages) >= json.pageCount) {
json.startPage = json.pageCount - json.visiblePages+1;
}
var lastNum = json.visiblePages + json.startPage - 1;
if(lastNum <= json.pageNum && lastNum != json.pageCount){
json.startPage = json.pageNum + 1;
lastNum++;
}
json.hasNextMore = lastNum < json.pageCount;
if(json.startPage >= json.pageNum && json.startPage != 1){
json.startPage = json.pageNum == 1 ? json.pageNum : json.pageNum - 1;
}
json.hasPrevMore = json.startPage > 1;
this.set(json);
}
});
return Model;
});
pagination.html 对应代码
<%if(pageCount > 1 || totalCount > 10){%>
<div class="unify-page">
<div class="unify-page-inner">
<div class="unify-page-num">
<ul>
<li class="previous <%=prev ? '' : 'disabled'%>"><a>上一页</a></li>
<%for(var i = startPage; i < visiblePages + startPage; i++){%>
<%if(i == pageNum){%>
<li class="page-num num active"><a href=""><%=i%></a></li>
<%}else{%>
<li class="page-num num"><a href=""><%=i%></a></li>
<%}%>
<%}%>
<li class="next <%=next ? '' : 'disabled'%>" ><a class="">下一页</a></li>
</ul>
</div>
<div class="unify-page-goto">
<input type="text" value="<%=pageNum%>" /><button>GO</button>
</div>
<div class="unify-page-info">
共<%=pageCount%>页 <%if(totalCount==10001){%>共10000+条<%}else{%>共<%=totalCount%>条<%}%>
</div>
<div class="unify-page-size">
每页显示 <input type="text" value="<%=pageSize%>"/> 条
</div>
</div>
</div>
<%}%>
