Pagination is the backbone of any content based website, with the help of which we can make the performance of the website fast. In this, instead of loading all the data at once on the page, we show only limited data at a time. In this article, we will learn about Pagination with Load More Button in depth with help of examples.
What is Pagination?
Whenever heavy data has to be shown in any website or web application, we use pagination there. In this, we show only some limited data on the website and display the rest of the data in the form of pages and when we click on these pages, the data of the next page is loaded. This makes the performance of the website fast and there is no effect on the user experience. But in modern web applications, we use the "Load more" button. This works in the same way as pagination, but in this, we do not refresh the page to load the data. We mostly do this for blog pages, product pages etc. To use pagination in Laravel, the already built-in pagination function "links()" is used.
Difference between Load More & Traditional Pagination
| Traditional Pagination | Load More |
| When we load data of next page, the whole page gets reloaded. | In this we do not have to sleep to refresh the entire page to load the data of the next page. |
| It is easy to implement in coding. | Implementing this is a little bit tricky, as it requires JavaScript. |
| In this the page numbers have to be shown at the bottom. | It only needs a "Load More" button to load the results |
| Because the page reloads every time, that is why the speed is slow. | The speed is fast because the entire page is not reloaded. Ajax is needed to load data in it |
| In this the page control is with the user, with which he can move to any page. | In this the user can only load the next data sequentially. |
| It is best for blogs, forums, product listings with so much focus. | This is best for mobile apps, image galleries, social feeds. |
Step-by-Step Guide to Laravel Load More Pagination
Step 1: Create new laravel project
composer create-project laravel/laravel laravel_example
Step 2: Now we will create a table in which we will store posts. For this we will create a migration file.
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('slug');
$table->text('content');
$table->timestamps();
});
Now we will execute this migration file.
php artisan migrate
Step 3: Now we will create a model named Post.
php artisan make:model Post
Step 4: Now we will fill some dummy data in it.
php artisan tinker Post::factory()->count(50)->create();
Step 5: Now we will create the route,
web.php
Route::get('/', 'App\Http\Controllers\PostController@index');
Route::get('/load-more', 'App\Http\Controllers\PostController@load_more_data');
Step 6: Now, create PostController and add below code
Create Controller
php artisan make:controller PostController
Below code add in controller:
<?php
use App\Models\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
public function index()
{
$posts = Post::whereNull('deleted_at')->orderBy('id', 'DESC')->paginate(5);
return view('posts.index', ['posts' => $posts]);
}
public function load_more_data(Request $request)
{
if ($request->ajax())
{
$posts = Post::whereNull('deleted_at')->orderBy('id', 'DESC')->paginate(5, ['*'], 'page', $request->page);
return view('posts.partials.post_list', ['posts' => $posts])->render();
}
}
}
Step 7: Now, display data in blade file
resources/views/posts/index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Load More Pagination</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
.post
{
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ccc;
}
.post h4
{
font-size: 17px;
line-height: 30px;
}
.post-data h2
{
font-size: 18px;
line-height: 30px;
}
.post-data h3
{
font-size: 16px;
line-height: 30px;
}
.post-data h4
{
font-size: 13px;
line-height: 30px;
}
.load-more-btn
{
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h2>Laravel Load More Example</h2>
<div id="post-data">
@include('posts.partials.post_list')
</div>
<button id="load-more" class="load-more-btn" data-page="2">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
let posturl = window.location.protocol+'//'+window.location.hostname;
$(document).ready(function() {
$('#load-more').click(function () {
let page = $(this).data('page');
$.ajax({
url: posturl + "/load-more",
type: "GET",
data: { page: page },
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function (data)
{
if ($.trim(data) === '')
{
$('#load-more').hide();
}
else
{
$('#post-data').append(data);
$('#load-more').data('page', page + 1);
}
},
error: function(errorresp)
{
console.log('Error: ' + errorresp);
}
});
});
});
</script>
</body>
</html>
Step 8:
resources/views/posts/partials/posts.blade.php
@foreach ($posts as $postitem)
<div class="post">
<h4>{{ $postitem->title }}</h4>
<p>{{ Str::limit($postitem->body, 150) }}</p>
</div>
@endforeach
How It Works in Browser
As above code, by default only 5 posts will be loaded, after this "Load More" button will be shown. When you click on this button,
- An ajax request will go to the backend like 'load-more?page=2', 'load-more?page=3' sets.
- The controller will accept the request and send it to the Blade file containing the partial view to load the next 5 data.
- And that list will be appended to the existing list. And again, the "Load More" button will appear.
- If there is no data, the "Load More" button will be hidden.
Infinite Scroll Instead of Load More Button
Sometimes we want to load data on an auto scroll basis without clicking the Load More button, this functionality is mostly seen in News websites. For this we have to auto click Load More based on the height of the window.
For Example:
<script>
$(window).scroll(function()
{
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 10)
{
$('#load-more').click();
}
});
</script>
Conclusion
Modernizing your user interface with "Load More Pagination" using Laravel and AJAX is very popular in these days. For feeds, product lists, blogs, or any lengthy data list, it provides a smooth experience, particularly on mobile or single-page apps.
