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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment