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 相关文章推荐
教你如何把一篇文章按要求分段
Oct 09 PHP
php 注册时输入信息验证器的实现详解
Jul 05 PHP
php中ob_get_length缓冲与获取缓冲长度实例
Nov 20 PHP
php递归json类实例
Dec 02 PHP
PHP编程入门的基本语法知识点总结
Jan 26 PHP
使用Composer安装Yii框架的方法
Mar 15 PHP
php实现在线通讯录功能(附源码)
May 13 PHP
php利用gd库为图片添加水印
Nov 09 PHP
使用Yii2实现主从数据库设置
Nov 20 PHP
详解PHP处理字符串类似indexof的方法函数
Jun 11 PHP
PHP使用DOM对XML解析处理操作示例
Jul 04 PHP
PHP中国际化的字符串排序和比较对象详解
Aug 23 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常用函数的用法详解
2013/05/10 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
javascript中对对层的控制
2006/12/29 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
带你了解python装饰器
2017/06/15 Python
python实现K最近邻算法
2018/01/29 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
如何提高MySql的安全性
2014/06/19 面试题
电子商务专业个人的自我评价
2013/11/19 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
教育见习报告范文
2014/11/03 职场文书
实习生辞职信范文
2015/03/02 职场文书
2015年环保局工作总结
2015/05/22 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
vue使用element-ui按需引入
2022/05/20 Vue.js