The Load More or Show More functionality is very simple and user-friendly because not all data loads simultaneously. Instead, data will load as you scroll or click a button, similar to pagination but without page refresh. In this post, we will create this feature to load more data from a MySQL database using Ajax in Laravel Framework, leveraging Laravel lazy loading pagination techniques. Let's dive into the process of building scroll pagination in Laravel.
Table Of Content
1 Prerequisites
1.) PHP version of >= 8.2
2.) Composer
3.) Mysql
2 Introduction
In this guide, we will create a posts table using migration. Then, we will develop a data model for the posts and a factory class to generate dummy post data. Lastly, we'll build a route to load posts dynamically and write the necessary code for auto-loading more data on page scroll using AJAX, integrating the power of Laravel lazy loading pagination and scroll pagination in Laravel.
3 Create / Install a Laravel Project
3.1 Install Laravel Project
First, ensure Composer is installed on your system. Use the following command to install a new Laravel Project:
Next, create a migration for the posts table using the Laravel artisan command:
php artisan make:migration create_posts_table
In the migration file located at database/migrations, add the following code to define the posts table structure:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->text('description');
$table->string('image');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('posts');
}
};
Run the migration:
php artisan migrate
5 Create Model
Now, create the Post model for the posts table. Create the file at app/Models/Post.php and add the following code:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'name',
'description',
'image'
];
}
6 Create Factory Class
Generate a factory class to create dummy data that loads dynamically during scrolling:
php artisan make:factory PostFactory --model=Post
Update the database/factories/PostFactory.php with:
<?php
namespace Database\Factories;
use Illuminate\Database\Eloquent\Factories\Factory;
/**
* @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Post>
*/
class PostFactory extends Factory
{
/**
* Define the model's default state.
*
* @return array
*/
public function definition(): array
{
return [
'name' => fake()->name(),
'description' => fake()->text(),
'image' => fake()->imageUrl(800,600),
];
}
}
To generate 100 dummy records, use:
php artisan tinker
Post::factory()->count(100)->create()
7 Create Controller (PostController)
Create a controller to handle the data loading functionality:
php artisan make:controller PostController
In PostController.php, create an index function to implement the lazy loading pagination logic:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
class PostController extends Controller
{
public function index(Request $request)
{
$posts = Post::paginate(6);
if ($request->ajax()) {
$view = view('data', compact('posts'))->render();
return response()->json(['html' => $view]);
}
return view('posts', compact('posts'));
}
}
?>
8 Create view (Blade)
In the resources/viewsdirectory, create posts.blade.php for the main view:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Load More Data on Page Scroll in Laravel 11</title>
<style>
body {
height: 1000px;
}
</style>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<div class="container">
<h1>Ajax Load More Data on Page Scroll using JQuery Laravel - getsamplecode.com</h1>
<div id="data-wrapper" class="row">
@include('data')
</div>
<div class="auto-load-message text-center" style="display: none;"> </div>
</div>
</body>
<script>
var ENDPOINT = "{{ route('posts.index') }}";
var page = 1;
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 20)) {
page++;
LoadMoreData(page);
}
});
function LoadMoreData(page) {
$.ajax({
url: ENDPOINT + "?page=" + page,
datatype: "html",
type: "get",
beforeSend: function () {
$('.auto-load-message').show();
$('.auto-load-message').html("Loading... ");
}
})
.done(function (response) {
if (response.html == '') {
$('.auto-load-message').html("We don't have more data to display ");
$('.load-more-data').hide();
return;
}
$("#data-wrapper").append(response.html);
})
.fail(function (jqXHR, ajaxOptions, thrownError) {
console.log('Server error occured');
});
}
</script>
</body>
</html>
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
Route::get('/', function () {
return view('welcome');
});
Route::get('posts',[PostController::class,'index'])->name('posts.index');
10 Folder Structure
11 Run Laravel Server to Test the App
Use the following command to serve the Laravel app:
php artisan serve
12 Conclusion
You have successfully implemented Load More Data on Page Scroll in Laravel 11 using jQuery Ajax, utilizing Laravel lazy loading pagination and scroll pagination techniques.
