$.showErr("服务器当前负载过大或者正在维护!" || thrownError);
}
}
});
},
页面首次加载的时候，我们将第一页的数据放到div中，这一步也很简单。
二、封装翻页组件 yunm.pager.js
完成第一步后，如何将翻页组件封装，就成为接下来的关键步骤了。
(function($) {
$.fn.extend({
pager : function(opts) {
// 可参照bootstrap的翻页，为了获得前一页和后一页的按钮组件
var setting = {
prev$ : "li.previous",
next$ : "li.next",
};
return this.each(function() {
var $this = $(this);
var pc = new Pager(opts);
// 参照bootstrap翻页
$this.html('<ul class="pager">' + '<li class="previous"><a href="#">← 前一页</a></li>' + '<li class="next"><a href="#">后一页 →</a></li>'
+ '</ul>');
var $prev = $this.find(setting.prev$);
var $next = $this.find(setting.next$);
if (pc.hasPrev()) {
// 如果有前一页，绑定前一页事件
_bindEvent($prev, pc.getCurrentPage() - 1, pc.rel());
} else {
// 否则置灰
$prev.addClass("disabled");
}
if (pc.hasNext()) {
_bindEvent($next, pc.getCurrentPage() + 1, pc.rel());
} else {
$next.addClass("disabled");
}
});
// 绑定点击事件，主要传递第几页
function _bindEvent($target, pageNum, rel) {
$target.bind("click", {
pageNum : pageNum
}, function(event) {
yunmPageBreak({
rel : rel,
data : {
pageNum : event.data.pageNum
}
});
event.preventDefault();
});
}
},
});
// 翻页的必要参数
var Pager = function(opts) {
this.opts = $.extend({
rel : "", // 用于局部刷新div id号
totalCount : 0,//总数
numPerPage : 10,// 默认显示10个
currentPage : 1,// 当前页
callback : function() {
return false;
}
}, opts);
};
$.extend(Pager.prototype, {
rel : function() {
return this.opts.rel;
},
// 每页显示多少个
numPages : function() {
return Math.ceil(this.opts.totalCount / this.opts.numPerPage);
},
// 当前页
getCurrentPage : function() {
var currentPage = parseInt(this.opts.currentPage);
if (isNaN(currentPage))
return 1;
return currentPage;
},
// 能否向前翻页
hasPrev : function() {
return this.getCurrentPage() > 1;
},
// 向后翻页
hasNext : function() {
return this.getCurrentPage() < this.numPages();
}
});
})(jQuery);
function yunmPageBreak(options) {
var op = $.extend({
rel : "",
data : {
pageNum : "",
},
callback : null
}, options);
if (op.rel) {
var $box = $("#" + op.rel);
// 获得局部刷新的div后，就可以获得同级的form表单
var form = $("form[target=turnPageForm]", $box.parent()).get(0);
