Question

jquery分页插件怎么运用到案例中

Answer 1

/**
* jQuery分页插件
* */
;(function (factory) {
if (typeof define === "function" && define.amd) {
// AMD模式
define([ "jquery" ], factory);
} else {
// 全局模式
factory(jQuery);
}
}(function ($) {

//定义MyPagePlugin的构造函数
MyPagePlugin = function(ele, option) {
// this.viewHtml="<nav><ul class='pagination'><li><a id='firstPageli'>«</a></li><li><a id='prevPageli'>‹</a></li><li class='active'><a>第<span id='curPageNoSpan'></span>页,共<span id='allPageCountSpan'></span>页</a></li><li><a id='nextPageli'>›</a></li><li><a id='lastPageli'>»</a></li></ul></nav>";
this.viewHtml= "<div class='pageplugin'><a class='first firstPageli'>«</a><a class='previous prevPageli'>‹</a><a class='present'>第<span class='curPageNoSpan'></span>页,共<span class='allPageCountSpan'></span>页</a><a class='next nextPageli'>›</a><a class='last lastPageli'>»</a></div>"

this.$element = ele;
/**参数：page:当前页,pageCount:总共页数,onPaged回调函数,回调函数会传入页数*/
this.defaults = {
page:1,
pageCount:1,
onPaged:function(pageNo){}
};
this.options = $.extend({}, this.defaults, option);

}
//定义MyPagePlugin的方法
MyPagePlugin.prototype = {
initPlugin:function(){
this.$element.empty();
this.$element.append(this.viewHtml);
this.options.onPaged(this.options.page);//初始化
this.$element.find(".curPageNoSpan").text(this.options.page);
this.$element.find(".curPageNoSpan").data("options",this.options);
this.$element.find(".allPageCountSpan").text(this.options.pageCount);
this.$element.find(".firstPageli").on("click",function(e){

var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
curNo=parseInt(curNo);
if(curNo==1){
return false;
}else{

$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(1);
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(1);
}
return false;
});
this.$element.find(".prevPageli").on("click",function(e){
var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
curNo=parseInt(curNo);
if(curNo==1){
return false;
}else{
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo-1);
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo-1);
}
return false;
});
this.$element.find(".nextPageli").on("click",function(e){
var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
curNo=parseInt(curNo);
var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();
pageCount=parseInt(pageCount);
if(curNo==pageCount){
return false;
}else{
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo+1);
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo+1);
}
return false;
});
this.$element.find(".lastPageli").on("click",function(e){
var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
curNo=parseInt(curNo);
var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();
pageCount=parseInt(pageCount);
if(curNo==pageCount){
return false;
}else{
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(pageCount);
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(pageCount);
}
return false;
});

}

}
$.fn.pagePlugin = function (option) {
var pagePlugin=new MyPagePlugin(this,option);
pagePlugin.initPlugin();
};
}));