AJax技术

Laravel+jQuery实现AJAX分页效果

字号+ 作者:H5之家 来源:H5之家 2017-11-16 08:06 我要评论( )

本文实例讲述了Laravel+jQuery实现AJAX分页效果。分享给大家供大家参考,具体如下:JavaScript部分://_______________________// listener to the [select from

本文实例讲述了Laravel+jQuery实现AJAX分页效果。分享给大家供大家参考,具体如下:

JavaScript部分:

//_______________________// listener to the [select from existing photos] button$('#photosModal').on('shown.bs.modal', function () { // get the first page of photos (paginated) getPhotos(function(photosObj){ displayPhotos(photosObj); });});/*** get the photos paginated, and display them in the modal of selecting from existing photos** @param page*/function getPhotos(callback) { $.ajax({ type: "GET", dataType: 'json', url: Routes.cms_photos, // this is a variable that holds my route url data:{ 'page': window.current_page + 1 // you might need to init that var on top of page (= 0) } }) .done(function( response ) { var photosObj = $.parseJSON(response.photos); console.log(photosObj); window.current_page = photosObj.current_page; // hide the [load more] button when all pages are loaded if(window.current_page == photosObj.last_page){$('#load-more-photos').hide(); } callback(photosObj); }) .fail(function( response ) { console.log( "Error: " + response ); });}/*** @param photosObj*/function displayPhotos(photosObj){ var options = ''; $.each(photosObj.data, function(key, value){ options = options + "<option data-img-src='"+value.thumbnail+"' value='"+value.id+"'></option>"; }); $('#photos-selector').append(options); $("select").imagepicker();}// listener to the [load more] button$('#load-more-photos').on('click', function(e){ e.preventDefault(); getPhotos(function(photosObj){ displayPhotos(photosObj); });});

php控制器部分:

//_______________________//...$photos = $this->photo_repo->paginate(12);return Response::json([ 'status' => 'success', 'photos' => $photos->toJson(),]);

更多关于Laravel相关内容感兴趣的读者可查看本站专题:《Laravel框架入门与进阶教程》、《php优秀开发框架总结》、《smarty模板入门基础教程》、《php日期与时间用法总结》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。

您可能感兴趣的文章:PHP框架Laravel插件Pagination实现自定义分页
Laravel框架数据库CURD操作、连贯操作总结
Laravel实现用户注册和登录
跟我学Laravel之安装Laravel
跟我学Laravel之视图 & Response
Laravel 5框架学习之用户认证
Laravel中使用自己编写类库的3种方法
Laravel 5框架学习之表单
PHP+JQuery+Ajax实现分页方法详解
jQuery ajax分页插件实例代码
jQuery+Ajax实现无刷新分页
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 在Ajax应用程序中实现实时数据推送 - 学习使用基于套接字的RIA技术

    在Ajax应用程序中实现实时数据推送 - 学习使用基于套接字的RIA技术

    2017-11-15 14:00

  • Ajax Laravel学院

    Ajax Laravel学院

    2017-11-14 13:11

  • 利用Ajax技术实现页面不刷新的验证用户名是否被注册代码

    利用Ajax技术实现页面不刷新的验证用户名是否被注册代码

    2017-11-14 09:01

  • 基于Ajax技术的掼蛋比赛自动裁判系统设计与实现

    基于Ajax技术的掼蛋比赛自动裁判系统设计与实现

    2017-11-09 17:02

网友点评
t