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关联链接常用代码
Nov 05 PHP
php连接mssql的一些相关经验及注意事项
Feb 05 PHP
PHP Streams(流)详细介绍及使用
May 12 PHP
Yii视图CGridView列表用法实例分析
Jul 12 PHP
PHP常用日期加减计算方法实例小结
Jul 31 PHP
PHP中上传文件打印错误错误类型分析
Apr 14 PHP
在laravel中使用with实现动态添加where条件
Oct 10 PHP
laravel5.1 ajax post 传值_token示例
Oct 24 PHP
laravel框架分组控制器和分组路由实现方法示例
Jan 25 PHP
php封装的page分页类完整实例代码
Feb 01 PHP
Laravel配合jwt使用的方法实例
Oct 25 PHP
HTTP头隐藏PHP版本号实现过程解析
Dec 09 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学习之PHP运算符
2006/10/09 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
基于python实现微信模板消息
2015/12/21 Python
Python常见异常分类与处理方法
2017/06/04 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python自动化之Ansible的安装教程
2019/06/13 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
python logging日志模块原理及操作解析
2019/10/12 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
运动会口号16字
2014/06/07 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
党员自评材料范文
2014/12/17 职场文书
大学生求职信怎么写
2015/03/19 职场文书