Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Laravel Ajax Pagination [LATEST]
Tested with Laravel 5.2 and 5.3. For more details see: http://laraget.com/blog/how-to-create-an-ajax-pagination-using-laravel
Let's say that we have a simple Laravel webiste with articles.
We want to have Ajax pagination on the page that shows (lists) all of the articles (for example, this page can be accessed from www.example.com/articles and it displays paginated lists of article titles.
The following files are described here:
- resources\views\articles\index.blade.php
- resources\views\articles\load.blade.php
- app\Http\Controllers\ArticleController.php
- app\Http\routes.php (or if you are using Laravel 5.3 in routes/web.php)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Laravel Ajax Pagination</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-9">
@if (count($articles) > 0)
<section class="articles">
@include('articles.load')
</section>
@endif
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
$('body').on('click', '.pagination a', function(e) {
e.preventDefault();
$('#load a').css('color', '#dfecf6');
$('#load').append('<img style="position: absolute; left: 0; top: 0; z-index: 100000;" src="/images/loading.gif" />');
// MAKE SURE THAT YOU PUT THE CORRECT IMG PATH - For more details see: http://laraget.com/blog/how-to-create-an-ajax-pagination-using-laravel
var url = $(this).attr('href');
getArticles(url);
window.history.pushState("", "", url);
});
function getArticles(url) {
$.ajax({
url : url
}).done(function (data) {
$('.articles').html(data);
}).fail(function () {
alert('Articles could not be loaded.');
});
}
});
</script>
</body>
</html>
<div id="load" style="position: relative;">
@foreach($articles as $article)
<div>
<h3>
<a href="{{ action('ArticleController@show', [$article->id]) }}">{{$article->title }}</a>
</h3>
</div>
@endforeach
</div>
{{ $articles->links() }}
<?php
namespace App\Http\Controllers;
use App\Article;
use Illuminate\Http\Request;
use App\Http\Requests;
class ArticleController extends Controller
{
protected $articles;
public function __construct(Article $articles)
{
$this->articles = $articles;
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
$articles = $this->articles->latest('created_at')->paginate(5);
if ($request->ajax()) {
return view('articles.load', ['articles' => $articles])->render();
}
return view('articles.index', compact('articles'));
}
}
Route::resource('articles', 'ArticleController');
// And that’s it. For more details see: http://laraget.com/blog/how-to-create-an-ajax-pagination-using-laravel
@aqil333

This comment has been minimized.

Copy link

@aqil333 aqil333 commented Dec 30, 2020

Really helpful this is exact solution of my code problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment