Hi All,Here, i will show you how to works auto load more data on page scroll laravel livewire. this example will help you laravel 8 livewire load more example. you can see load more data on page scroll in laravel livewire. you can understand a concept of laravel livewire load more data example. Alright, let’s dive into the steps.
In this tutorial, we will create simple load more data on scroll example using laravel livewire. you can use laravel livewire load more with laravel 6, laravel 7 and laravel 8 version.
Here, i will give you very simple example to creating load more data on window scroll event example with laravel. we will use only livewire/livewire package.
So, let's follow bellow step and you will get bellow layout:
Step 1: Install Laravel 8
first of all we need to get fresh Laravel 8 version application using bellow command, So open your terminal OR command prompt and run bellow command:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Create Dummy Records using Tinker Factory
you need to run following command to create dummy records in your users table. let's run both command:
php artisan tinker
User::factory()->count(100)->create()
Step 3: Install Livewire
now in this step, we will simply install livewire to our laravel 8 application using bellow command:
composer require livewire/livewire
Step 4: Create Component
Now here we will create livewire component using their command. so run bellow command to create load more component.
php artisan make:livewire load-more-user
Now they created fies on both path:
app/Http/Livewire/LoadMoreUser.php
resources/views/livewire/load-more-user.blade.php
Now both file we will update as bellow for our contact us form.
app/Http/Livewire/LoadMoreUser.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\User;
class LoadMoreUser extends Component
{
public $perPage = 15;
protected $listeners = [
'load-more' => 'loadMore'
];
/**
* Write code on Method
*
* @return response()
*/
public function loadMore()
{
$this->perPage = $this->perPage + 5;
}
/**
* Write code on Method
*
* @return response()
*/
public function render()
{
$users = User::latest()->paginate($this->perPage);
$this->emit('userStore');
return view('livewire.load-more-user', ['users' => $users]);
}
}
resources/views/livewire/load-more-user.blade.php
<div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>No.</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>
</div>
Step 5: Create Route
now we will create one route for calling our example, so let's add new route to web.php file as bellow:
routes/web.php
Route::get('load-more-user', function () {
return view('default');
});
Step 6: Create View File
here, we will create blade file for call form route. in this file we will use @livewireStyles, @livewireScripts and @livewire('contact-form'). so let's add it.
resources/views/default.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Livewire Example - HDTuto.com</title>
@livewireStyles
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
Laravel Livewire Example - HDTuto.com
</div>
<div class="card-body">
@livewire('load-more-user')
</div>
</div>
</div>
</body>
@livewireScripts
<script type="text/javascript">
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
window.livewire.emit('load-more');
}
};
</script>
</html>
Now you can run using bellow command:
php artisan serve
Open bellow URL:
http://localhost:8000/load-more-user
I hope it can help you...
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example