Laravel+jQuery实现AJAX分页效果

2024-04-16 14:30:29

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

laravel实现分页样式替换示例代码(增加首、尾页)

前言本文主要给大家介绍了关于laravel分页样式替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 方法如下: 一.自定义一个类(代码如下),位置随你放,注意命名空间. 二.模板输出调用 {!! $data->render(new \App\Http\Controllers\ShmilyThreePresenter($data)) !!} 最终样式实现代码 <?php //创建继承自 Illuminate\Pagination\BootstrapThreeP
PHP框架Laravel插件Pagination实现自定义分页

Laravel 的分页很方便,其实扩展起来也挺容易的,下面就来做个示例,扩展一下 paginate() 和 simplePaginate() 方法,来实现我们自定义分页样式,比如显示 "上一页" 和 "下一页" ,而不是 "<" 和 ">" ,当然扩展的方法掌握了你就可以肆无忌惮的扩展一个你想要的分页了,比如跳转到某一页,分页显示一共多少记录,当前显示的记录范围等等巴拉巴拉的... 5.1和5.2应该是同样的方法,
Laravel手动分页实现方法详解

本文实例讲述了Laravel手动分页实现方法.分享给大家供大家参考,具体如下: 这里的演示实例基于Laravel的5.2版本在开发过程中有这么一种情况,你请求Java api获取信息,由于信息较多,需要分页显示.Laravel官方提供了一个简单的方式paginate($perPage),但是这种方法只适用model.查询构建器. 今天说下给定一个数组如何实现和paginate方法一样的效果. 查看paginate方法源码 #vendor/laravel/framework/src/Illu
laravel自定义分页效果

对于laravel分页,自带一个paginate的方法,很好用,但是也是有局限性的. 所以自己针对于此写了一个自己的分页,具体代码如下 <?php namespace ...; use ...; /** * 自定义分页类,适合少数据的查询,多数据的时候不推荐 * Class CustomPaginate * @package App\Tools\Paginate */ class CustomPaginate { /** * 自定义数组分页 * @param $data = 返回结果 * @pa
Laravel+jQuery实现AJAX分页效果

本文实例讲述了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) getPhoto
jQuery实现Table分页效果

本文实例为大家分享了jQuery实现Table分页效果的具体代码,供大家参考,具体内容如下 CSS: <style> .pager { font-size: 18px; } .pagerTotal { font-size: 18px; height: 36px; line-height: 36px; margin-left: 2px; } .pager_a { display: block; width: 36px; height: 36px; line-height: 36px; float
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版或中文翻译修改版一.相关demo 基本demo页面 Ajax demo页面参数可编辑demo页面二.简介与说明此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex
jquery+json实现分页效果

Json作为一种轻量级的数据交换格式,由于其传输数据格式的方便性,今天偶然想将其应用于分页实现,分页做为web开发一个长久的话题,其应用的高效与重要性就不多说了本文主要技术:反射机制,Json数据格式,jquery 为了应用的通用性,首先要根据反射机制,能将要返回的任意类型的结果对象转化成Json类型的格式. public static String toJSON(Object obj) { HashMap map = new HashMap(); Class c = obj.getClass
ajax分页效果（bootstrap模态框）

ajax分页效果图: 上干货: /** * ajax分页 */ $(function(){ $(".modal-body").find(".pagination").on("click","li",function(){ var totalPage=$(".modal-body").find(".pagination").find(".lilength").lengt
AJAX分页效果简单实现

最近写一个给用户组添加角色的功能,要求一边是未添加的角色,一边是已添加的角色,还有搜索功能, 点击添加后,ajax保存操作. 考虑功能为待查询功能分页 , 下方分页条, 一共有 2*2 ,4个ajax- JS代码如下: $(document).ready(function() { App.init(); currentRole(); // 当前角色 currentRolePage();//当前角色分页 noAddRole(); //未添加角色 noAddRolePage();//未添加角色分页
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用

jPaginate是基于jQuery的动感滚动分页插件,它的表现形式是像分页的按钮一样,非常有意思的是这些按钮却可以滚动,可以通过单击或鼠标滑向点两侧的小箭头来控制按钮的前后滚动. 调用jPaginate插件的方法很简单: $(elementID).paginate() 属性设置可喜的是,jPaginate提供了很多属性配置,您可以轻易的定制想要的分页效果. 设置方法如: $(elementID).paginate({ count:80, start:1, ... }) count: 数字,总
jQuery ajax分页插件实例代码

推荐阅读:jQuery插件开发精品教程让你的jQuery提升一个台阶既然说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:(我觉得对咱们程序员来说再优美的文字描述.介绍也比不上代码来得实在.) 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: , preText: "pre", nextText: "next", firstText: &quo
jquery ajax分页插件的简单实现

说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: 10, preText: "pre", nextText: "next", firstText: "First", lastText: "Last", shiftingLeft: 3, shiftingRig
jQuery+PHP+ajax实现微博加载更多内容列表功能

在一些微博网站上我们经常可以看到这样的应用,微博内容列表上并没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文将结合jQuery和PHP给大家讲述如何实现这种功能. Ajax加载的基本原理:当页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"查看更多"的链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作

Laravel+jQuery实现AJAX分页效果

相关推荐

随机推荐