Livewire Load More OnScroll Tutorial Laravel 8
Laravel 8 autoload more data on page scroll laravel livewire. In this tutorial we will learn how to implement load more data on page scroll in laravel 8 using livewire.
Sometimes, you want need load data on page scroll or infinity page scroll in laravel 8 using livewire.
In this tutorial, you will learn very easy step by step how to implement load more data on infinity scroll in laravel 8 with livewire package.
![Livewire OnScroll [Load More] Laravel Example - Phpcodingstuff.com](https://www.phpcodingstuff.com/uploads/tutorial_images/loadmore_phpcodingstuff.png "Livewire OnScroll [Load More] Laravel Example - Phpcodingstuff.com")
First of all, Open your terminal OR command prompt and run the following command to install laravel fresh app for laravel livewire load more data app:
composer create-project --prefer-dist laravel/laravel blog Add database credentials in the .env file. So open your project root directory and find the .env file. Then add database detail in .env file. We learn laravel 8 livewire load more:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here
Open your command prompt and run the following command to create the table into your database then create Laravel livewire load more data on infinity scroll:
php artisan migrate
This command will create a table in your database.
After that, open your terminal and run the following command to generate fake data using laravel faker as follow:
php artisan tinker
Then
User::factory()->count(100)->create()You need to install the livewire package to your laravel project using the following command we see load more on scroll jquery:
composer require livewire/livewireCreate the livewire components for load more data using the following command in laravel. Laravel 8 Livewire Load More OnScroll Tutorial. So Open your cmd and run the following command:
php artisan make:livewire load-more-user-list
This command will create the following components on the following path:
app/Http/Livewire/LoadMoreUserList.php resources/views/livewire/load-more-user-list.blade.php
Now, Navigate to the app/Http/Livewire folder and open the LoadMoreUserList.php file. We see laravel livewire load more data. Then add the following code into your LoadMoreUserList.php file:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\User;
class LoadMoreUserList 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-list', ['users' => $users]);
}
}
After that, Navigate to the resources/views/livewire folder and open the load-more-user-list.blade.php file. we will learn on page scroll using livewire in laravel. Then add the following code into your load-more-user-list.blade.php file:
<div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
@foreach($datas as $data)
<tr>
<td>{{ $data->company}}</td>
<td>{{ $data->contact}}</td>
<td>{{ $data->country}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
Navigate to the routes folder and open web.php. Then add the following routes into your web.php file This code is a make route in Laravel 8 Livewire Load More OnScroll Tutorial Example:
Route::get('/load-more-scroll', function () {
return view('lists');
});Navigate to resources/views/folder and create one blade view files that name lists.blade.php file. Then add the following code into your lists.blade.php file:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Livewire Load More OnScroll Tutorial Laravel 8 - phpcodingstuff.com</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h2>Livewire Load More OnScroll Tutorial Laravel 8 - phpcodingstuff.com</h2>
</div>
<div class="card-body">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
@livewire('load-more-user-list')
</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>
Finally, you need to run the following PHP artisan serve command to start your laravel livewire load more data on page scroll:
php artisan serve or php artisan serve --port=8080 I hope it can help you...
Leave a Reply