Laravel 5 AJAX Pagination using JQuery Example

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

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.

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

<?php
namespace 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

<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

<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.

Laravel Load More Data on Page Scroll AND Laravel Custom Helpers AND how to laravel latest version AND Laravel login using google

Leave a Comment

Your email address will not be published. Required fields are marked *

14  +    =  24

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US