Laravel+jQuery实现AJAX分页效果
更新时间:2016年10月2日 16:16 点击:2039
本文实例讲述了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程序设计有所帮助。
相关文章
- 如果我们需要安培Laravel4的话最php最低要求要在php5.3.7版本并且我们需要把mcrypt与openss这两个扩展开启才可以,具体步骤我们参考下文。 前面我们介绍我了 com...2016-11-25
Laravel 调试工具 laravel-debugbar 打印日志消息
laravel-debugbar 调试工具的教程小编整理了几篇不错的教程,今天我们来看一篇Laravel 调试工具 laravel-debugbar 打印日志消息例子,希望文章对各位有帮助。 其实不...2016-11-25Laravel 5.1中定义事件、事件监听器以及触发事件例子
下文我们来看一篇关于Laravel 5.1中定义事件、事件监听器以及触发事件例子,希望能够帮助到各位新手朋友的哦。 这里我们基于之前基于模型+缓存对文章增删改查这篇...2016-11-25- Query架构的开发人员能够创建一个插件代码来扩展其功能,从而能够产生一些最好的插件,让你的网站或任何给定的项目达到一个全新的水平。 ...2016-04-27
- 这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
- Laravel框架我们用到的不多了,但如果使用需要搭配了,下面我们来看一篇关于搭建php Laravel框架教程详解,具体的操作细节如下所示,希望对各位有帮助。 一、安装 Compos...2016-11-25
基于RequireJS和JQuery的模块化编程——常见问题全面解析
下面小编就为大家带来一篇基于RequireJS和JQuery的模块化编程——常见问题全面解析。小编觉得挺不错的,现在分享给大家,也给大家做个参考...2016-04-17- 本文给大家分享的是如何在Node.js中使用jQuery的方法,包含步骤以及出错的处理,非常的详细,有需要的小伙伴可以参考下...2016-09-01
- 你可能想创建一个在应用的任何地方都可以访问的函数,这个篇文章将带你解决此问题,感兴趣的同学,可以参考下。...2021-05-27
- 在Node.js中使用jQuery的做法,需要先安装jquery,npm install jquery ,安装后的版本是 3.1.0,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看下吧...2016-08-24
- Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来;它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁...2016-11-25
- 这篇文章主要为大家详细介绍了前端笔记之jquery部分,jQuery是一个兼容多浏览器的javascript库...2016-05-05
- 这篇文章主要介绍了jQuery中通过ajax的get()函数读取页面的方法,需要的朋友可以参考下...2016-03-01
- 数据表之间是纵横交叉、相互关联的,laravel的一对一,一对多比较好理解,本文重点通过实例给大家讲解 laravel中的多对多关系,感兴趣的朋友一起看看吧 数据表之间是纵...2017-07-06
- 本文给大家讲解的是在laravel中是怎么实现autoload的?分析之后才发现,真的是很巧妙,下面就来给大家详细说明下...2017-05-21
- Laravel的主要技术特点:1、Bundle是Laravel的扩展包组织形式或称呼。Laravel的扩展包仓库已经相当成熟了,可以很容易的帮你把扩展包(bundle)安装到你的应用中。你可以选择下载一个扩展包(bundle)然后拷贝到bundles目录,或者...2015-10-21
在Web项目中引入Jquery插件报错的完美解决方案(图解)
这篇文章主要介绍了在Web项目中引入Jquery插件报错的完美解决方案的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-10-03PHP框架Laravel中实现supervisor执行异步进程的方法
这篇文章主要给大家介绍了PHP框架Laravel中实现supervisor执行异步进程的方法,文中介绍的非常详细,相信对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-11CSS3 media queries结合jQuery实现响应式导航
这篇文章主要为大家详细介绍了CSS3 media queries结合jQuery实现响应式导航,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-02- 这篇文章主要介绍了 JavaScript、jQuery与Ajax的关系的相关资料,需要的朋友可以参考下...2016-01-25