Skip to content

Instantly share code, notes, and snippets.

@FilipQL
Last active March 25, 2023 16:03
Show Gist options
  • Save FilipQL/7a569c6ea96d1800974e59e6b7c6d5ed to your computer and use it in GitHub Desktop.
Save FilipQL/7a569c6ea96d1800974e59e6b7c6d5ed to your computer and use it in GitHub Desktop.
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
Copy link

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