本文实例讲述了Laravel+jQuery实现AJAX分页效果。分享给大家供大家参考,具体如下:
JavaScript部分:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
//_______________________ // 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控制器部分:
1
2
3
4
5
6
7
|
//_______________________ //... $photos = $this ->photo_repo->paginate(12); return Response::json([ 'status' => 'success' , 'photos' => $photos ->toJson(), ]); |
希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。