Laravel+jQuery实现AJAX分页效果


Posted in PHP onSeptember 14, 2016

本文实例讲述了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框架的PHP程序设计有所帮助。

PHP 相关文章推荐
PHP 调试工具Debug Tools
Apr 30 PHP
比较简单的百度网盘文件直链PHP代码
Mar 24 PHP
PHP 读取Postgresql中的数组
Apr 14 PHP
php截取中文字符串不乱码的方法
Dec 25 PHP
Codeigniter整合Tank Auth权限类库详解
Jun 12 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
Jan 05 PHP
thinkPHP数据库增删改查操作方法实例详解
Dec 06 PHP
PHP中Laravel 关联查询返回错误id的解决方法
Apr 01 PHP
yii2.0整合阿里云oss上传单个文件的示例
Sep 19 PHP
PHP实现权限管理功能示例
Sep 22 PHP
PHP调用微博接口实现微博登录的方法示例
Sep 22 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
Oct 18 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
Sep 14 #PHP
PHP自定义函数实现格式化秒的方法
Sep 14 #PHP
PHP经典算法集锦【经典收藏】
Sep 14 #PHP
微信支付的开发流程详解
Sep 13 #PHP
PHP仿微信多图片预览上传实例代码
Sep 13 #PHP
微信支付PHP SDK ―― 公众号支付代码详解
Sep 13 #PHP
PHP基于单例模式编写PDO类的方法
Sep 13 #PHP
You might like
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
php探针不显示内存解决方法
2019/09/17 PHP
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
python 项目目录结构设置
2020/02/14 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
天网面试题
2013/04/07 面试题
小学生元旦广播稿
2014/02/21 职场文书
岗位职责怎么写
2014/03/14 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
会议简报格式范文
2015/07/20 职场文书
大学副班长竞选稿
2015/11/21 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python