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:


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) {

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


And now update the model like:


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.


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



Step 3: Create Controller

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


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:





Read also: Laravel 9 Dynamic Dependent Dropdown Using Ajax


Hope it can help you.


#laravel #laravel-9x #pagination #ajax #jquery