Laravel 5 AJAX Pagination using JQuery Example
In this post, we will show you the use of Laravel 5 AJAX Pagination using JQuery Example. we will show you how to use ajax for Laravel Pagination.
Ajax makes your application more flexible, you don’t need to reload or refresh the whole body for small changes, you can made changes in any part without loading page.
Step 1 : Add Route for Laravel 5 AJAX Pagination using JQuery Example
1
| Route::get('laravel-ajax-pagination',array('as'=>'ajax-pagination','uses'=>'PaginationController@setproductList')); |
Step 2 : PaginationController for Laravel 5 AJAX Pagination using JQuery Example
In this progression, i am making a capacity for item posting and check if there will be ajax ask for then pass information without formats.
1
2
3
4
5
6
7
8
9
10
| public function setproductList(Request $request){ $set_products = Product::paginate(6); // request for ajax if ($request->ajax()) { // return for ajax return view('presult', compact('products')); } // return for ajax return view('setproductList',compact('products'));} |
Step 3 : Product Model for Laravel 5 AJAX Pagination using JQuery Example
1
2
3
4
5
6
7
| <?phpnamespace App;use Illuminate\Database\Eloquent\Model;class Product extends Model{ public $fillables = ['name','details'];} |
Step 4 : View setproductList.blade.php for Laravel 5 AJAX Pagination using JQuery Example
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
56
57
58
59
60
61
62
| <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2>Laravel AJAX Pagination with JQuery - onlinecode</h2> </div> </div></div><div id="container_product"> @include('presult')</div><script> $(window).on('hashchange', function() { if (window.location.hash) { var setpage = window.location.hash.replace('#', ''); if (setpage == Number.NaN || setpage <= 0) { // return data return false; }else{ // call getpageData function getpageData(setpage); } } }); $(document).ready(function() { $(document).on('click', '.pagination a',function(event) { $('li').removeClass('active'); $(this).parent('li').addClass('active'); event.preventDefault(); var seturl = $(this).attr('href'); var setpage=$(this).attr('href').split('setpage=')[1]; getpageData(setpage); }); }); function getpageData(setpage){ $.ajax( { url: '?setpage=' + setpage, type: "get", datatype: "html", // for beforsenddata // beforeSend: function() // { // you can show your loader hear // show loder file // } }) .done(function(datas) { console.log(datas); $("#container_product").empty().html(datas); location.hash = setpage; }) .fail(function(jqXHR, ajaxOptions, thrownError) { alert('No response vaelible from server'); }); }</script> |
Step 5 : presult.blade.php for Laravel 5 AJAX Pagination using JQuery Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <table class="table table-bordered"> <tr> <th>Pro Name</th> <th>Pro Details</th> </tr> <!-- print all data start --> @foreach ($set_products as $product_val) <tr> <td>{{ $product_val->name }}</td> <td>{{ $product_val->details }}</td> </tr> @endforeach <!-- print all data end --></table>{!! $set_products->render() !!} |
Laravel has make exceptionally basic approach to render pagination in application for Laravel 5.* AJAX Pagination using JQuery Example.
When we are working with this code then we saw that url is same since we don’t have to invigorate or reload page while working with ajax so its extremely hard to comprehend on which page we are that is the reason we utilized hashes in url and refresh page number on snap.
No comments :
Post a Comment