Laravel 8 infinite scroll using ajax

how to show more data on page scroll using ajax in laravel 8

Posted by Luke Beeno on January 3, 2022

Laravel 8 infinite scroll using ajax

how to show more data on page scroll using ajax in laravel 8

Posted by Luke Beeno on January 3, 2022

In this lesson you will be shown how to load data continuously as you scroll using ajax in Laravel 8.

Step 1. Create Laravel project

composer create-project laravel/laravel scroll-load-example

Step 2. Connect to database


Step 3. Create Migration, Model and Controller by executing command

php artisan make:model Student -mc

Step 4. Edit database migration file

Go to "database/migration" and edit the file create_students_table.

public function up()
  Schema::create('students', function (Blueprint $table) {

Step 5. execute command

PHP artisan migrate

Step 6. Edit model file

Go to "app/models" and edit the file Student.

 * The attributes that are not mass assignable.
 * @var array
protected $guarded = [

 * Fillable fields for a Profile.
 * @var array
protected $fillable = [

Step 7. Create and edit factory file

execute command:

php artisan make:factory StudentFactory --model=Student

Go to "database/factories" and edit the file StudentFactory.

public function definition()
  return [
    'name' => $this->faker->name(),
    'id_badge' => $this->faker->randomDigit

Step 8. Populate database

Execute command:

php artisan tinker

Execute command in tinker:


Step 9. Create route

Go to "routes" and edit the file web.php.

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

| 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!


Step 10. Edit controller file

Go to "app/Http/Controllers" and edit the file StudentController.php.

Add this method:

public function loadOnScroll(Request $request)
   $posts = Student::paginate(10);
       $view = view('student-data',compact('posts'))->render();
       return response()->json(['html'=>$view]);
   return view('load-students', compact('posts'));

Step 11. Create views outlined in StudentController

Go to "resources/view" and create the file display-students.blade.php and student-data.blade.php.

display-students.blade.php below:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="//">
    <link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="//">
    <title>Wecode101 infinite scroll tutorial</title>
<div class="container">
    <h3 class="text-center mt-5">Laravel 8 infinite scroll using ajax</h3>
    <div id="post">
        <!-- include student-data file here -->
    <div class="load-data text-center" style="display:none">
        <i class="mdi mdi-48px mdi-spin mdi-loading"></i> Loading ...
<script src=""></script>
<script src="" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="//"></script>
<!-- script ajax that enable infinite scroll -->
    function loadMoreData(page)
            url:'?page=' + page,
            beforeSend: function()
                if(data.html == ""){
                    $('.load-data').html("No more Posts Found!");
            // Call back function
                console.log("Server not responding.....");

    //function for Scroll Event
    var page =1;
        let val = $(window).scrollTop() + $(window).height();
        let rnd = Math.round(val);

        if(rnd >= $(document).height()){

student-data.blade.php below:

@foreach($posts as $post)
    <div class="col-md-4 mb-3" >
        <div class="card">
            <div class="card-header">
            <div class="card-body">
                <table class="table">
                        <th>Student ID</th>

Now start the server and open the browser, you should see infinite scroll in action.

To download this tutorial go to

This field is required
Your question have been successfully submitted and will be reviewed before published
Please login to ask a question