Laravel provides simple pagination and also provide custom pagination. In this tutorial, we will see how we can create this laravel default next previous pagination using ajax request. Ajax request helps us to load data without page refreshing. So in this laravel ajax next previous pagination example tutorial, we will see laravel ajax pagination.

I will use users table to create this laravel 9 ajax pagination. I will use a route to create this laravel javascript pagination, you can create two route for that, but I will use one route.

So let's see the example code of laravel pagination without reload. If you do not know how to create this laravel ajax next previous button pagination, then this example is for you.

Preview of Laravel Ajax Pagination



Step 1: Install Laravel

First of all, we need to get a fresh Laravel 9 version application using the bellow command, So open your terminal OR command prompt and run the bellow command to start laravel pagination without reload:

composer create-project laravel/laravel example-app


Step 2: Connect Database

After successfully installing the laravel app and then configuring the database setup. We will open the ".env" file and change the database name, username and password in the env file to create laravel ajax pagination next previous.




Read also: Laravel Create Pagination From Array Tutorial


Step 3: Create Migration and Model

In this step, we need to create users table and model. then we need to run a migration. so let's change that on both files.



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

return new class extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('users', function (Blueprint $table) {

     * Reverse the migrations.
     * @return void
    public function down()


Now update the user model by replacing it with the below code:


namespace App\Models;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
class User extends Authenticatable
    use HasFactory, Notifiable;
     * The attributes that are mass assignable.
     * @var array
    protected $fillable = [
        'name', 'email', 'password'
     * The attributes that should be hidden for arrays.
     * @var array
    protected $hidden = [
        'password', 'remember_token',
     * The attributes that should be cast to native types.
     * @var array
    protected $casts = [
        'email_verified_at' => 'datetime',


Now you have to run this migration by following the command:

php artisan migrate


Read also: Laravel Pretty URL Pagination With Numeric Number


Step 4: Create Route

Here, we need to add one more route to display the users data with laravel ajax pagination next previous. so let's add that route in the web.php file.



use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TutorialController;

| Web Routes
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
Route::get('/', [TutorialController::class,'index'])->name('pagination.fetch');


Step 5: Create Controller

Here, we need to add the index() method for fetching users data with laravel ajax pagination example in TutorialController. so let's add like as below:



namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class TutorialController extends Controller
    public function index(Request $request)
        $users = User::query()->simplePaginate(3);
            return view('pagination_child', compact('users'))->render();
        return view('welcome',compact('users'));


Step 6: Create Blade file

In this step, we need to create a new master blade file and update for user blade file. so let's change it.


<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('', 'Laravel') }}</title>
    <!-- Tailwindcss -->
    <script src=""></script>

    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav me-auto">


                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        <!-- Authentication Links -->
                            @if (Route::has('login'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>

                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}

                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                        {{ __('Logout') }}

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">

        <main class="py-4">


Now create a welcome blade file and update it like this: 



<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel 9.x Ajax Pagination With Next Previous Button | Laravelia</div>
                 <div class="card-body">
                    <div id="table_data">

<script src=""></script>
        $('body').on('click', '.transition', function(event){
            var page = $(this).attr('href').split('page=')[1];
        const fetch_data = page => {
            var _token = $("input[name=_token]").val();
                url:"{{ route('pagination.fetch') }}",
                data:{_token:_token, page:page},


Now create a pagination_child blade file and update it like this: 


<div class="table-responsive">
    <table class="table table-striped table-bordered">
        @foreach($users as $user)
            <td>{{ $loop->index + 1 }}</td>
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>

    <center class="mt-5">
        {!! $users->links() !!}


Read also: Laravel 9 Custom Pagination Example


Ok, now we are ready to go and test laravel ajax pagination example tutorial. So let's run the project using this command:

php artisan serve


Now you can test our application by visiting the below URL:




Now we know laravel pagination without reload. Hope this laravel javascript pagination tutorial will help you to create laravel ajax pagination.