In this article, i will share with you how to make onscroll load more functionality in laravel 8 using the live wire package with a simple example.
Load more or infinite scrolling is the very best way to data display when you have a lot of data in your application and you don't want to use pagination in your application to display the data on the front end side. basically, user's no need to click on another link to show the another and the old data. Users only need to stay on one page and scroll the page and see more data on your application. see type functionality you generally see in the e-commerce side.
Here, we make some type of functionality in laravel using the livewire package. if before you never work or use livewire package in laravel then don't worry in this article we make it from scratch so you do need to know details of the livewire package functionality, just follow all steps.
First, wee need to create the laravel 8 application help of running the following command in your terminal.
composer create-project laravel/laravel laravel-load-more-example --prefer-dist
Now, you open your .env file and make sure your database setting is perfect.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=
Now, we create some test data in the users table using the laravel factory.
User::factory()->count(200)->create()
In this step we install the livewire package in our laravel 8 application.
composer require livewire/livewire
Now, we need to make our load more components help of running the livewire command in our terminal. livewire provide some console command for easy to use.
make:livewire load-more-user-data
after running the above command in our laravel8 application root path then the following two files crerated automatically in our laravel 8 application.
app/Http/Livewire/LoadMoreUserData.php
resources/views/livewire/load-more-user-data.blade.php
Open and update the below code in app/Http/Livewire/LoadMoreUserData.php file:
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\User;
class LoadMoreUserData extends Component
{
public $limitPerPage = 10;
protected $listeners = [
'load-more' => 'loadMore'
];
public function loadMore()
{
$this->limitPerPage = $this->limitPerPage + 6;
}
public function render()
{
$users = User::latest()->paginate($this->limitPerPage);
$this->emit('userStore');
return view('livewire.load-more-user-data', ['users' => $users]);
}
}
update the below code in resources/views/livewire/load-more-user-data.blade.php file:
<div>
<table class="table table-striped">
<thead>
<tr>
<th>#Id</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
@foreach($users as $user)
<tr>
<td>{{ $user->id }}</td>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/
Route::get('/load-more-users', function () {
return view('welcome');
});
open the resources/views/welcome.blade.php file and add the following code:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Livewire Load More Data on Page Scroll Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
html,
body {
height: 100vh;
}
</style>
</head>
<body>
<div class="container mt-4">
@livewire('load-more-user-data')
</div>
@livewireScripts
<script type="text/javascript">
window.onscroll = function (ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
window.livewire.emit('load-more');
}
};
</script>
</body>
</html>
Now, run your laravel application in the browser, just run the following command in your terminal.
php artisan serve
and hit the following url in your browser
http://localhost:8000/load-more-users
i hope you like thi article.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
API Authentication in Laravel without Using Passport.
Since Laravel 5.3, Laravel Passport is t...How to get element by class name in JavaScript
Use the getElementsByClassName() method...Laravel 5.6 - RealTime CRUD System Using Google Firebase
Today, we are share with you how to buil...How to make Admin Auth in Laravel8 with Example?
In this article I will share with you ho...How to create Sitemap Format
Sitemap is a blueprint of your website t...