Hello Dev,
Today, I will learn you how to load more data with scroll using livewire laravel application. We will show page scrolling with loading data in laravel livewire.In this artical, I will learn you load more data in laravel livewire. You can scroll page then load more data in livewire at that time use bellow example.
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.Livewire relies solely on AJAX requests to do all its server communicaton.
Here I will give full example for load more data livewire in laravel,So Lets follow the bellow step.
Step 1 : Install Laravel AppIn First step, We need to get fresh laravel version application using bellow command. So Let's open terminal and run bellow command.
composer create-project --prefer-dist laravel/laravel blogStep 2 : Setup Database Configuration
After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Enter_Your_Database_Name DB_USERNAME=Enter_Your_Database_Username DB_PASSWORD=Enter_Your_Database_PasswordStep 3 : Install Livewire
In this step, You will simply install livewire to our laravel application using bellow command:
composer require livewire/livewireStep 4 : Create Component
Now, You can create livewire component using bellow command, So Let's run bellow command to create user component:
php artisan make:livewire users
Now they created fies on both path:
app/Http/Livewire/Users.php resources/views/livewire/users.blade.php
Now first file we will update as bellow for Users.php file.
app/Http/Livewire/Users.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\User;
class Users extends Component
{
public $perPage = 8;
protected $listeners = [
'load-more' => 'loadMore'
];
public function loadMore()
{
$this->perPage = $this->perPage + 5;
}
public function render()
{
$users = User::latest()->paginate($this->perPage);
$this->emit('userStore');
return view('livewire.users-list',['users' => $users]);
}
}
Step 5 : Add Route
Now, we need to add route for list users in laravel application. so open your "routes/web.php" file and add following route.
routes/web.php
Route::view('users','livewire.home');
Step 6 : Create View
Here, we will create blade file for show users list. in this file we will use @livewireStyles, @livewireScripts and @livewire('users'). so let's add it.
resources/views/livewire/users.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>
resources/views/livewire/home.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@livewireStyles
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h2>Laravel Livewire Load More with Scroll</h2>
</div>
<div class="card-body">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
@livewire('users')
</div>
</div>
</div>
</div>
</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 we are ready to run our example so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/users
It will help you..