Laravel 11 JQuery Load More Data on Scroll Example

By Hardik Savani May 22, 2024 Category : Laravel

In this post, I will show you step by step how to load more data using ajax pagination on scroll in laravel 11 application.

In this example, we will create a posts table using migration. Then, we will create a data model for the posts and a factory class to create dummy post data. Finally, we will create a route to load posts and write the code for auto-loading more data on button click event using jQuery AJAX. Let's take a look at a simple step-by-step example.

laravel 11 load more data scroll

Step for Laravel 11 Load More Data on Scroll Event Example

  • Step 1: Install Laravel 11
  • Step 2: MySQL Database Configuration
  • Step 3: Create Migration
  • Step 4: Create Model
  • Step 5: Create Factory Class
  • Step 6: Create Route
  • Step 7: Create Controller
  • Step 8: Create View Files
  • Run Laravel App

Step 1: Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: MySQL Database Configuration

In Laravel 11, there is a default database connection using SQLite, but if we want to use MySQL instead, we need to add a MySQL connection with the database name, username, and password to the `.env` file.


DB_DATABASE=here your database name(blog)
DB_USERNAME=here database username(root)
DB_PASSWORD=here database password(root)

Step 3: Create Migration

Here, we will create a new migration for adding a new table posts in the users table. So let's run the following command:

php artisan make:migration create_posts_table

After this command, you will find one file in the following path "database/migrations," and you have to put the below code in your migration file to create the posts table.

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('posts', function (Blueprint $table) {

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

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

php artisan migrate

Step 4: Create Model

After creating the "posts" table, you should create the Post model for posts. First, create a file in this path app/Models/Post.php and put the following content in the Post.php file:


namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
    use HasFactory;
     * Write code on Method
     * @return response()
    protected $fillable = [
        'title', 'body', 'slug'

Step 5: Create Factory Class

This step explains how to generate dummy data using a factory; this data loads dynamically on page scroll:

php artisan make:factory PostFactory --model=Post

Further, put the below code in database\factories\PostFactory.php:


namespace Database\Factories;
use Illuminate\Database\Eloquent\Factories\Factory;
use App\Models\Post;
use Illuminate\Support\Str;
 * @extends \Illuminate\Database\Eloquent\Factories\Factory
class PostFactory extends Factory
     * The name of the factory's corresponding model.
     * @var string
    protected $model = Post::class;
     * Define the model's default state.
     * @return array
    public function definition(): array
        return [
            'title' => $this->faker->text(),
            'slug' => Str::slug($this->faker->text()),
            'body' => $this->faker->paragraph()

Open the terminal and execute the commands below to generate the test data:

php artisan tinker


Step 6: Create Route

In this step, we need to create routes for displaying posts and getting posts. So, open your "routes/web.php" file and add the following route.


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

Step 7: Create Controller

Here, we need to create a new controller, PostController, with an index method to display the posts view and return data. So let's put the code below.


namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
class PostController extends Controller
     * Write code on Method
     * @return response()
    public function index(Request $request)
        $posts = Post::paginate(10);
        if ($request->ajax()) {
            $view = view('data', compact('posts'))->render();
            return response()->json(['html' => $view]);
        return view('posts', compact('posts'));

Step 8: Create View Files

In the last step, let's create `posts.blade.php` and `data.blade.php` for displaying the posts list and put the following code:


<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Load More Data on Button Click using JQuery Laravel -</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="" />
<div class="container mt-5" style="max-width: 750px">
    <h1>Load More Data on Button Click using JQuery Laravel 11 -</h1>
    <div id="data-wrapper">
    <div class="text-center">
        <button class="btn btn-success load-more-data"><i class="fa fa-refresh"></i> Load More Data...</button>
    <!-- Data Loader -->
    <div class="auto-load text-center" style="display: none;">
        <svg version="1.1" id="L9" xmlns="" xmlns:xlink=""
            x="0px" y="0px" height="60" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
            <path fill="#000"
                d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s"
                    from="0 50 50" to="360 50 50" repeatCount="indefinite" />
<script src=""></script>
    var ENDPOINT = "{{ route('posts.index') }}";
    var page = 1;
    call infinteLoadMore()
    function infinteLoadMore(page) {
                url: ENDPOINT + "?page=" + page,
                datatype: "html",
                type: "get",
                beforeSend: function () {
            .done(function (response) {
                if (response.html == '') {
                    $('.auto-load').html("We don't have more data to display :(");

            .fail(function (jqXHR, ajaxOptions, thrownError) {
                console.log('Server error occured');


@foreach ($posts as $post)
<div class="card mb-2"> 
    <div class="card-body">{{ $post->id }} 
        <h5 class="card-title">{{ $post->title }}</h5>
        {!! $post->body !!}

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:



I hope it can help you...