Laravel 11 Load More Data on Scroll with jQuery and Ajax

Hello, laravel web developers! In this article, we'll see how to load more data on scroll with jQuery Ajax in laravel 11. Here, we'll learn about infinite scroll in laravel 11 using Ajax. We'll load more data using Ajax pagination on scroll in the laravel 11 application.

Sometimes, we have many records, making the page length too large. In such cases, we can implement infinite scroll with the help of jQuery in Laravel.

jQuery Load More Data on Scroll in Laravel 11

jquery load more data on scroll in laravel 11


Step 1: Install Laravel 11 Application

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel laravel-11-example


Step 2: Configure Database

Next, we'll configure the database. In laravel 11, the default database connection is SQLite but here we'll use MySQL.




Step 3: Create Migration

Then, we'll create a migration using the following command.

php artisan make:migration create_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()

Then, run the following command to migrate the table into the database.

php artisan migrate


Step 4: Create Model

Next, create a Post model using the following command and add the fillable fields.


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

Then, we'll create a Factory class using the following command.

php artisan make:factory PostFactory --model=Post


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

Now, open the terminal and run the following command.

php artisan tinker



Step 6: Define Route

Now, define the routes into the web.php file.


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


Step 7: Create Controller

Next, create a controller, define the index function, and add an Ajax call to load more data.


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(15);
        if ($request->ajax()) {
            $view = view('data', compact('posts'))->render();
            return response()->json(['html' => $view]);
        return view('posts', compact('posts'));


Step 8: Create View Files

Next, create a blade file and add the html and jquery ajax call


<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 11 Load More Data on Scroll with jQuery and Ajax - Techsolutionstuff</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="" />
<div class="container mt-5" style="max-width: 750px">
    <h1>Laravel 11 Load More Data on Scroll with jQuery and Ajax - Techsolutionstuff</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 url = "{{ route('posts.index') }}";
    var page = 1;
    function infinteLoadMore(page) {
                url: url + "?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 !!}


Step 9: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.

php artisan serve


You might also like :


Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.