Laravel 9 Infinite Scroll JQuery Ajax Pagination Tutorial

Hello artisan,

In this laravel infinite scroll pagination tutorial, I will show you how to create infinite scroll pagination in laravel 9 using ajax request. You know that there are many built-in pagination systems in laravel 9. But in this example, I will show you how to create laravel load more on scroll pagination example with ajax request.

When a user does a mouse scroll, we will show him the next paginated data after the previous data. So to learn a simple example of infinite scroll using jquery ajax on page scroll in laravel 6, laravel 7, laravel 8 and laravel 9 application from step by step.

You have to just follow some below steps and you will get an infinite scroll in your laravel application. After finishing all those steps you will find output as in like bellow preview:

Step 1: Create Model

To create this infinite ajax scroll pagination, we need a post table to generate some dummy posts. So create the by the following command:

php artisan make:model Post -m

Now update the database like:

database/migrations 

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


class CreatePostTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }


    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop("posts");
    }
}

And now update the model like:

app/Models\Post.php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    public $fillable = ['title','description'];
}

Step 2: Add Route

Read also: Load More after Button Click Pagination Example in Laravel

In this step, we need to add a route for generating views. so open web.php your file and add the following route.

 routes.php/web.php

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

Route::post('my-post',[PostController::class,'myPost'])->name('myPost');

Step 3: Create Controller

Now update the post controller and create a myPost() method to show on scroll pagination laravel 9.

app/Http/Controllers/PostController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Post;

class PostController extends Controller
{
    public function myPost(Request $request)
    {
    	$posts = Post::paginate(5);

    	if ($request->ajax()) {
    		$view = view('data',compact('posts'))->render();
            return response()->json(['html'=>$view]);
        }
    	return view('my-post',compact('posts'));
    }
}

Step 4: Create View Files

In last step, we have to create view two file "my-post.blade.php" for main view and another for data, so first create my-post.blade.php file:

resources/view/my-post.php

resources/view/data.php

Read also: Laravel 9 Dynamic Dependent Dropdown Using Ajax

Hope it can help you.