首页 > 语言 > PHP > 正文

Laravel+jQuery实现AJAX分页效果

2024-05-04 23:49:49
字体:
来源:转载
供稿:网友

本文实例讲述了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教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选