初始画页面时加载所有数据:
$(document).ready(function(){
var counter=0;
var pageStart=1;
var pageSize=10;
var isEnd=false;
getData(pageStart,pageSize);
function getData(offset,size){
$.ajax({
url: ,
type: 'GET',
async: true,
dataType:'json',
contentType:"application/json; charset=utf-8",
success: function(data){
respon=data.data.result;
var sum=respon.length;
for(var i=(offset-1)*size;i<sum;i++){
creatDiv(respon,i); //将数据依次填入新建的div中
}
if(((offset-1)*size+sum)===data.data.total){
$('.noMoreData').show().html("没有更多数据了!");
isEnd=true;
return isEnd;
}
},
error: function(err){
}
});
$(window).scroll(function(){
if(isEnd==true){
return;
}
if($(document).height()-$(window).scrollTop()-$(window).height()<100){
console.log("距离底部100px")
pageStart++;
getData(pageStart,pageSize);
}
})
})
搜索时按条件加载:
function search(){
$('.personInfo').empty();
var counter=0;
var index=1;
var pageSize=10;
var isEnd = false;
searchData(index,pageSize);
function searchData(pageIndex,eachPageSize){
$.ajax({
url:,
type:'post',
async:true,
dataType:'json',
data:{
index:pageIndex,
pageSize:eachPageSize,
name:$('#name').val(),
},
success:function(data){
if(data.status==0){
if(data.data.total!=0){
$('#total').empty();
$('#total').html(data.data.total);
respon=data.data.result;
if(respon.length!==0){
var sum=respon.length;
for(var i=0;i<sum;i++){
creatDiv(respon,i);
}
if(((pageIndex-1)*eachPageSize+sum)===data.data.total){
isEnd=true;
('.noMoreData').show().html("没有更多数据了!");
}
$(window).scroll(function(){
if(isEnd==true){
return;
} if($(document).height()-$(window).scrollTop()-$(window).height()<100){
index++;
searchData(index,pageSize);
}
})
};
}else{
console.log("无符合条件的数据")
}else{
console.log(data.message);
};
},
error:function(data){
console.log('err');
}
})
}
}
想要的效果是初始时显示所有数据,搜索时显示出符合条件的数据,两者均动态加载更多数据,但现在搜索时滚动条下滑时会触发初始化的加载更多的接口,导致数据重复加载了
很简单,定义一个全局变量。
当初始加载的时候,让变量等于true,
当搜索的时候,变量为false,
然后,加载更多的时候判断这个变量的状态选择执行getData()还是searchData();