Laravel+jQuery实现AJAX分页效果

 更新时间:2016年10月2日 16:16  点击:2037

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

[!--infotagslink--]

相关文章

  • Laravel4安装配置的方法

    如果我们需要安培Laravel4的话最php最低要求要在php5.3.7版本并且我们需要把mcrypt与openss这两个扩展开启才可以,具体步骤我们参考下文。 前面我们介绍我了 com...2016-11-25
  • Laravel 调试工具 laravel-debugbar 打印日志消息

    laravel-debugbar 调试工具的教程小编整理了几篇不错的教程,今天我们来看一篇Laravel 调试工具 laravel-debugbar 打印日志消息例子,希望文章对各位有帮助。 其实不...2016-11-25
  • Laravel 5.1中定义事件、事件监听器以及触发事件例子

    下文我们来看一篇关于Laravel 5.1中定义事件、事件监听器以及触发事件例子,希望能够帮助到各位新手朋友的哦。 这里我们基于之前基于模型+缓存对文章增删改查这篇...2016-11-25
  • 50 个 jQuery 插件可将你的网站带到另外一个高度

    Query架构的开发人员能够创建一个插件代码来扩展其功能,从而能够产生一些最好的插件,让你的网站或任何给定的项目达到一个全新的水平。 ...2016-04-27
  • BootStrap和jQuery相结合实现可编辑表格

    这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
  • 搭建php Laravel框架教程详解

    Laravel框架我们用到的不多了,但如果使用需要搭配了,下面我们来看一篇关于搭建php Laravel框架教程详解,具体的操作细节如下所示,希望对各位有帮助。 一、安装 Compos...2016-11-25
  • 基于RequireJS和JQuery的模块化编程——常见问题全面解析

    下面小编就为大家带来一篇基于RequireJS和JQuery的模块化编程——常见问题全面解析。小编觉得挺不错的,现在分享给大家,也给大家做个参考...2016-04-17
  • 教你如何在Node.js中使用jQuery

    本文给大家分享的是如何在Node.js中使用jQuery的方法,包含步骤以及出错的处理,非常的详细,有需要的小伙伴可以参考下...2016-09-01
  • 如何用Laravel包含你自己的帮助函数

    你可能想创建一个在应用的任何地方都可以访问的函数,这个篇文章将带你解决此问题,感兴趣的同学,可以参考下。...2021-05-27
  • Laravel Nginx配置步骤详解

    Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来;它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁...2016-11-25
  • jQuery中通过ajax的get()函数读取页面的方法

    这篇文章主要介绍了jQuery中通过ajax的get()函数读取页面的方法,需要的朋友可以参考下...2016-03-01
  • 前端jquery部分很精彩

    这篇文章主要为大家详细介绍了前端笔记之jquery部分,jQuery是一个兼容多浏览器的javascript库...2016-05-05
  • 详解PHP laravel中多对多关系的代码实例

    数据表之间是纵横交叉、相互关联的,laravel的一对一,一对多比较好理解,本文重点通过实例给大家讲解 laravel中的多对多关系,感兴趣的朋友一起看看吧 数据表之间是纵...2017-07-06
  • Node.js中使用jQuery的做法

    在Node.js中使用jQuery的做法,需要先安装jquery,npm install jquery ,安装后的版本是 3.1.0,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看下吧...2016-08-24
  • Laravel实现autoload方法详解

    本文给大家讲解的是在laravel中是怎么实现autoload的?分析之后才发现,真的是很巧妙,下面就来给大家详细说明下...2017-05-21
  • 全面解读PHP的人气开发框架Laravel

    Laravel的主要技术特点:1、Bundle是Laravel的扩展包组织形式或称呼。Laravel的扩展包仓库已经相当成熟了,可以很容易的帮你把扩展包(bundle)安装到你的应用中。你可以选择下载一个扩展包(bundle)然后拷贝到bundles目录,或者...2015-10-21
  • 在Web项目中引入Jquery插件报错的完美解决方案(图解)

    这篇文章主要介绍了在Web项目中引入Jquery插件报错的完美解决方案的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-10-03
  • PHP框架Laravel中实现supervisor执行异步进程的方法

    这篇文章主要给大家介绍了PHP框架Laravel中实现supervisor执行异步进程的方法,文中介绍的非常详细,相信对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-11
  • CSS3 media queries结合jQuery实现响应式导航

    这篇文章主要为大家详细介绍了CSS3 media queries结合jQuery实现响应式导航,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-02
  • JavaScript、jQuery与Ajax的关系

    这篇文章主要介绍了 JavaScript、jQuery与Ajax的关系的相关资料,需要的朋友可以参考下...2016-01-25