Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Laravel AJAX Pagination with JQuery
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Laravel AJAX Pagination with JQuery</title>
<div class="posts">
<script src="//"></script>
$(window).on('hashchange', function() {
if (window.location.hash) {
var page = window.location.hash.replace('#', '');
if (page == Number.NaN || page <= 0) {
return false;
} else {
$(document).ready(function() {
$(document).on('click', '.pagination a', function (e) {
function getPosts(page) {
url : '?page=' + page,
dataType: 'json',
}).done(function (data) {
location.hash = page;
}).fail(function () {
alert('Posts could not be loaded.');
class BlogController extends Controller
* Posts
* @return void
public function showPosts()
$posts = Post::paginate(5);
if (Request::ajax()) {
return Response::json(View::make('posts', array('posts' => $posts))->render());
return View::make('blog', array('posts' => $posts));
class Post extends Eloquent
* The database table used by the model.
* @var string
protected $table = 'posts';
* Define guarded columns
* @var array
protected $guarded = array('id');
@foreach ($posts as $post)
<h2>{{ $post->title }}</h2>
{{ $post->summary }}
{{ $posts->links() }}
Copy link

velrino commented Nov 9, 2015


Thanks :D

Copy link

any one guide me i have an error how can i solve it ?
FatalErrorException in BlogController.php line 17:
Class 'App\Http\Controllers\Post' not found

Copy link

try add a path to the Post class
like: 'use App\Post;'

Copy link

Rexeh commented Feb 14, 2016

This works great, the only issue I'm having is that the currentPage doesn't go back to the front-end. So when using pagination controls to go to page 2, page 1 stays the active link.

Any solution?

Copy link

This really great thanks :)

But i have an issue my request on next or page number click makes ajax request twice for same page number and results are same for both requests. Any One help Me please thanks in advance.

Copy link

dokicro commented Mar 23, 2016

@Rexeh you should put {{ $posts->link }} to posts.blade.php to generate pagination again too...

@qaiserjaffri remove

$(window).on('hashchange', function() { if (window.location.hash) { var page = window.location.hash.replace('#', ''); if (page == Number.NaN || page <= 0) { return false; } else { getPosts(page); } } });

Copy link

when I clicked page 2 . the result will display when I clicked back to 1 it doesn't display the page 1

Copy link


Copy link

jaazee commented May 20, 2016

anyone help me to write route for this ? i am using Laravel i am having problem when click on link it gave error

Copy link

JorenRapini commented Jun 27, 2016

If you're getting an error after clicking a pagination link, it's possible you need to include View and Response in your controller at the top. That's what I forgot to put in initially.

use View;
use Response;

Copy link

Thanks, really useful.

Copy link

This is working in Laravel 5.3. Thank you very much. @mohamedaimann

Copy link

Nice colours!

Copy link

g8 m8 i r8 8/8, no h8

Copy link

super! Thanks for this example!

Copy link

Excellent stuff.

Copy link

lgugliotta commented Aug 9, 2017

I do this function for use in laravel, it's run perfectly

function ajaxPagination(){
                    $('.pagination a').on('click', function(e){
                        var url = $(this).attr('href');
                            type: 'GET',
                            url: url,
                            dataType: "html",
                            beforeSend: function(){
                                $('.selector').html("<div class='pt-sm text-center'><i class='fa fa-cog fa-spin fa-4x fa-fw' aria-hidden='true'></i>")
                            success: function(dataHtml){
                                }, 2000);
                            error: function(){
                                $('.selector').html("<div class='pt-sm text-center'><p>Error al carga. Intente mas tarde</p></div>");

Copy link

kc28 commented Oct 30, 2017

Thank You Very Much

Copy link

I have problems help me

Copy link

@Tungquantedge, Change line 17. if(Request::ajax()){ to 17. if(request()->ajax()){ you will be good to go.

Copy link

Thnkew very much Dear.

Copy link

@flycoop Did you found any idea to remove #1, #2.... in the URL?

Copy link

thanks worked well
but i have two paginations at the same view when i run the first one returns correct results and when run the second pagination return the results of first request ..note the two queries at the same function ..any idea to add 2 pagination with same function and same view

Copy link

This work well, just need to put the correct url and the div you want to load data. Thanx

Copy link

its working properly. i have one doubt the landing page/first page shows proper result but cant see api call in network area if inspection. but when i click 2nd page or 3rd page or back to 1st page then the api calls work properly. is it possible to call api on landing page. if it is then how?
Thank you

Copy link

Thank you very much dear.

Copy link

sodmond commented Feb 4, 2021

Thanks for this, worked fine

Copy link

terremoth commented Mar 21, 2021


Why we didn't think about make() views than render() it and send to JSON?


Copy link

Me Like pagination Next page click but current page checkbox checked in continue not a unchecked after next page Plz solutions ...

Copy link

Thank you guy. it worked perfectly
However, i have another issue. when i clicked any of the items in the list on page 5(for example) and click the "browser Back Button", it takes me to page 1 insteady of page 5.
this is only happening in chrome. it is working well in firefox. pls help

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