Laravel+jQuery实现AJAX分页效果
本文实例讲述了Laravel+jQuery实现AJAX分页效果。分享给大家供大家参考,具体如下:
JavaScript部分:
//_______________________
//listenertothe[selectfromexistingphotos]button
$('#photosModal').on('shown.bs.modal',function(){
//getthefirstpageofphotos(paginated)
getPhotos(function(photosObj){
displayPhotos(photosObj);
});
});
/**
*getthephotospaginated,anddisplaytheminthemodalofselectingfromexistingphotos
*
*@parampage
*/
functiongetPhotos(callback){
$.ajax({
type:"GET",
dataType:'json',
url:Routes.cms_photos,//thisisavariablethatholdsmyrouteurl
data:{
'page':window.current_page+1//youmightneedtoinitthatvarontopofpage(=0)
}
})
.done(function(response){
varphotosObj=$.parseJSON(response.photos);
console.log(photosObj);
window.current_page=photosObj.current_page;
//hidethe[loadmore]buttonwhenallpagesareloaded
if(window.current_page==photosObj.last_page){
$('#load-more-photos').hide();
}
callback(photosObj);
})
.fail(function(response){
console.log("Error:"+response);
});
}
/**
*@paramphotosObj
*/
functiondisplayPhotos(photosObj)
{
varoptions='';
$.each(photosObj.data,function(key,value){
options=options+"<optiondata-img-src='"+value.thumbnail+"'value='"+value.id+"'></option>";
});
$('#photos-selector').append(options);
$("select").imagepicker();
}
//listenertothe[loadmore]button
$('#load-more-photos').on('click',function(e){
e.preventDefault();
getPhotos(function(photosObj){
displayPhotos(photosObj);
});
});
php控制器部分:
//_______________________ //... $photos=$this->photo_repo->paginate(12); returnResponse::json([ 'status'=>'success', 'photos'=>$photos->toJson(), ]);
更多关于Laravel相关内容感兴趣的读者可查看本站专题:《Laravel框架入门与进阶教程》、《php优秀开发框架总结》、《smarty模板入门基础教程》、《php日期与时间用法总结》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》
希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。