We noticed you're using an ad blocker

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Laravel 6 ajax pagination with jQuery

world cup 2023

WorldCup 2023

Get update standing, score, poll

Get Now

Pagination is one of the best ways for showing a big set of data. Fortunately, The Laravel framework provides the eloquent API for pagination. It's very easy to make pagination. If you already have known about Laravel framework & jQuery and looking an easy way to make Ajax pagination with jQuery in Laravel framework then it's for you. In this tutorial post, I'll show you, how you can make an Ajax pagination with jQuery easily. Here I am using Laravel 6 but the version doesn't a fact for this tutorial. You can easily do exactly the same thing on Laravel 5. Let's follow the simple steps to make an Ajax pagination with jQuery.


Laravel Ajax pagination with jQuery

  1. Make laravel project
  2. Database details
  3. Define routes
  4. Make controller
  5. Make views
  6. jQuery script for Ajax pagination


Make laravel project

Let's make a laravel project by composer command. You can do exactly the same thing if you have already a project.

composer create-project --prefer-dist laravel/laravel laravel-pagination


Database details

Put the database details in the project env file and save.



Define Routes

Define two routes in the web.php file. One for returning the pagination data and another for returning view, where we'll make ajax request for pagination.

Route::get('posts', 'PostController@index');
Route::get('post-data', 'PostController@postData');


Make Controller

Make the post controller which we have defined in our route definition.

php artisan make:controller PostController

write the code in the post controller.


namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Post;

class PostController extends Controller
    function index()
       return view('posts.index');

    function postData(Request $request)
         $data = Post::paginate(10);
         return view('posts.data', compact('data'));


Make views

We need 2 views inside resources/posts directory. Let's create the first one data.blade.php

<!-- resources/posts/data.blade.php -->

<div class="table-responsive">
  <table class="table table-striped table-bordered table-condensed">
	  @foreach($data as $row)
	   <td>{{ $row->id }}</td>
	   <td>{{ $row->post_title }}</td>

  <div>{!! $data->render() !!}</div>

Another one index.blade.php

<!-- resources/posts/index.blade.php -->

    <div id="posts"></div>

    <!-- here jquery script -->


jQuery script for ajax pagination

Now write jQuery script at the end of the markup in index.blade.php file. Keep in mind, you must have jQuery library include in your template file before using the jQuery script for a pagination.


  function getData(page){
    if(!page) page=1;


  $(document).on('click', '.pagination a', function(e){
     var page = $(this).attr('href').split('page=')[1];




Now run the server by php artisan serve command and browser http://localhost:8000/posts


Share on

Related Post - Latest Post

Laravel Barcode generation tutorial

What's new in Laravel 9

Make laravel site super fast by page-cache!

Laravel maintenance mode bypass by Secret Route!

Laravel database backup automatically - cPanel shared hosting, VPS

Laravel Datatables - Ajax, Column, Buttons, Customization