Hello Devs,

In this tutorial, we are going to learn about laravel 7 ajax pagination with jquery. 

Follow this step by step guide given below:




Step 1 :

 

Install Laravel 7 Application 

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


Database Configuration   .env

DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret



Step 2: 


Create blogs Table and Model 

php artisan make:model Blog -m

/database/migrations/2020_03_07_100411_create_blogs_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateBlogsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('blogs', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->longText('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('blogs');
    }
}


Run this command:

php artisan migrate

/app/Blog.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Blog extends Model
{	
    /**
    * Run the migrations.
    *
    * @return void
    */
    protected $fillable = [
        'name','description'
    ];
}



Step 3: 


Create Route /routes/web.php

Route::get('pagination-ajax','BlogController@index')->name('blogs.ajax.pagination');



Step 4: 


Create Controller 

php artisan make:controller BlogController

/app/Http/Controllers/BlogController.php

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Blog;

class BlogController extends Controller
{
    /**
    * Display a listing of the resource.
    *
    * @return \Illuminate\Http\Response
    */
    public function index(Request $request)
    {
        $blogs = Blog::paginate(5);
  
        if ($request->ajax()) {
            return view('pagination', compact('blogs'));
        }
  
        return view('pagination',compact('blogs'));
    }
}



Step 5: 


Create Blade Files /resources/views/pagination.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 7 Ajax Pagination Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
    <style type="text/css">
        .mt-5{
            margin-top: 90px !important; 
        }
    </style>
</head>
<body class="bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-2 mt-5">
                <div class="card">
                    <div class="card-header">
                        <h4>Laravel 7 Ajax Pagination Example - Rathorji.in</h4>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th width="100px">Id</th>
                                    <th>Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($blogs as $value)
                                <tr>
                                    <td>{{ $value->id }}</td>
                                    <td>{{ $value->name }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {!! $blogs->render() !!}                
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(window).on('hashchange', function() {
            if (window.location.hash) {
                var page = window.location.hash.replace('#', '');
                if (page == Number.NaN || page <= 0) {
                    return false;
                }else{
                    getData(page);
                }
            }
        });

        $(document).ready(function()
        {
            $(document).on('click', '.pagination a',function(event)
            {
                event.preventDefault();

                $('li').removeClass('active');
                $(this).parent('li').addClass('active');

                var myurl = $(this).attr('href');
                var page=$(this).attr('href').split('page=')[1];

                getData(page);
            });

        });

        function getData(page){
            $.ajax(
            {
                url: '?page=' + page,
                type: "get",
                datatype: "html"
            }).done(function(data){
                $("#tag_container").empty().html(data);
                location.hash = page;
            }).fail(function(jqXHR, ajaxOptions, thrownError){
                  alert('No response from server');
            });
        }
    </script>
</body>
</html>


Run this command:

php artisan serve

Open this URL:

http://localhost:8000/pagination-ajax


I hope this example helps you.