javascript 滚动分页

由于这两天项目用到滚动分页 ,所以写了个处理滚动分页的js类 备用吧当,调用只需
new ScrollPage({...});//配上相应参数就好了。。。
function ScrollPage(config){

this.config = config;
this.defaultLoadingTemplate = "<tr id='default_loading' style='text-align:center'><td style='text-align:center' colspan='6' >努力加载中...</td></tr>";
this.scrollTarget = config.scrollTarget;
this.hasLoad = true;
this.pageNo = config.pageNo ? config.pageNo:1;
this.data = !config.data ? {"pageNo": this.pageNo}:config.data;
this.dataType = config.dataType?config.dataType:"html";
this.url = config.url?config.url:config.getUrl();
this.type = config.type?config.type:"get";
this.appendTarget = config.appendTarget;
this.responseData = "";
this.responseHandler = "";
this.httpCode = 200;
this.hasError = false;
this.loadingTarget = config.loadingTarget?config.loadingTarget:this.defaultLoadingTemplate;

this.before = {};

this.after = {};

this.finally = {};

this.init();

}
ScrollPage.prototype.init = function(){
//张定事件
this.addScrollListener(this);
var obj = this;
//before涵数初始化
if(!this.config.before){//添加默认执行前的拦截器
this.addBefore(function(){
$(obj.appendTarget).after(obj.loadingTarget);
});
}else{
this.addBefore(obj.config.before);用户自定义的拦截器
}
//after函数初始化

if(!this.config.responseHandler){//默认的处理器
this.addAfter(function(){
$(obj.appendTarget).append(obj.responseData);
obj.increamentPageNo();
})

}else{
this.addAfter(this.config.responseHandler);//用户自定义的拦截器
}

//finally涵数初始化 默认必需处理的
this.addFinally(function(){
var s_top = $(obj.scrollTarget).get(0).scrollTop;
$(obj.scrollTarget).get(0).scrollTop = s_top-5;//往上调一点
$(obj.loadingTarget).hide();
})
//用户自定义的 final
if(this.config.complete){
this.addFinally(this.config.complete)
}

}
ScrollPage.prototype.addScrollListener= function(obj){
$(obj.scrollTarget).scroll(function(){
var targetHight = $(obj.scrollTarget).height();
var scrollHight = $(obj.scrollTarget)[0].scrollHeight;
var scrollTop = $(obj.scrollTarget)[0].scrollTop;
//触底了 要加载数据了
if(scrollTop + targetHight >= scrollHight){
obj.execute(obj);
}
});
};
//设置是否加载了
ScrollPage.prototype.setHasLoad = function(hasLoad){this.hasLoad = hasLoad;};
ScrollPage.prototype.getHasLoad = function(){ return this.hasLoad;};

//post数据
ScrollPage.prototype.setData = function(data){this.data = data;};
ScrollPage.prototype.getData = function(){ return this.data;};

//pageNo+1
ScrollPage.prototype.increamentPageNo = function(){
this.pageNo ++ ;
this.data.pageNo = this.pageNo;
};
ScrollPage.prototype.getPageNo = function(){ return this.pageNo};

//添加请求前的处理器
ScrollPage.prototype.addBefore = function(before){
var key = "before_" + this.before.length;
this.before.key = before;
};
//添加响应后的
ScrollPage.prototype.addAfter = function(after){
var key = "after_" + this.after.length;
this.after.key = after;
};
//添所有最后的处理器
ScrollPage.prototype.addFinally = function(final){

var key = "finally_" + this.finally.length;
this.finally.key = final;
};

ScrollPage.prototype.setResponseData = function(data){this.responseData = data;};
ScrollPage.prototype.getResponseData = function(){ return this.responseData;};

ScrollPage.prototype.setUrl = function(url){this.url = url;};
ScrollPage.prototype.getUrl = function(){ return this.url;};

ScrollPage.prototype.handleBefore = function(){
this.setHasLoad(false);
for(var fun in this.before){
this.before[fun]();
}
}
ScrollPage.prototype.handleAfter = function(){
for(var fun in this.after){
this.after[fun]();
}
this.setHasLoad(true);
}
ScrollPage.prototype.handleFinally = function(){
for(var fun in this.finally){
this.finally[fun]();
}
}
ScrollPage.prototype.handleError = function(){
alert("加载出错");
}
//设置当前页
//查询
ScrollPage.prototype.execute = function(obj){
$.ajax({
url :obj.getUrl(),//ajaxUrl,
type:"post",
data : obj.getData(),
dataType:obj.dataType,
beforeSend:function(){
//开始后打开loading效果
if(!obj.getHasLoad()){
return false;
}
obj.handleBefore();

},
success:function(data){
obj.setResponseData(data);
obj.handleAfter();
},
error:function(){
obj.handleError();
},
complete:function(data){
//结束后清掉loading效果
obj.handleFinally();
}
});
};
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值