Livewire Load More data onclick | Load more Data on Scroll in Laravel Livewire
App/Http/Livewire/Department.php
public $perPage = 10;
protected $listeners = [
'load-more' => 'loadMore'
];
public function loadMore()
{
$this->perPage = $this->perPage + 5;
}
public function render()
{
$data = Department::latest()->paginate($this->perPage);
return view('livewire.departments',compact('data'));
}
Layouts.app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<html lang="en">
<head>
<meta charset="utf-8" />
@livewireStyles
</head>
<body>
@yield('content')
@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>
</head>
<body>
@yield('content')
@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>
users.departments.blade.php
@extends('layouts.app')
@section('content')
<div class="flex justify-center">
@livewire('departments')
</div>
@endsection
@section('content')
<div class="flex justify-center">
@livewire('departments')
</div>
@endsection
livewire.departments.blade.php
<div>
<table class="table table-striped" style="margin-top:20px;">
<tr>
<td>NO</td>
<td>NAME</td>
<td>Code</td>
<td>ACTION</td>
</tr>
@if($data->count()>0)
@foreach($data as $row)
<tr>
<td>{{$loop->index + 1}}</td>
<td>{{$row->name}}</td>
<td>{{$row->code}}</td>
<td>
<button wire:click="edit({{$row->id}})" class="btn btn-sm btn-outline-danger py-0">Edit</button> |
<button wire:click="destroy({{$row->id}})" class="btn btn-sm btn-outline-danger py-0">Delete</button>
</td>
</tr>
@endforeach
</table>
<!-- <button wire:click="loadMore()" class="btn btn-info">Loand More..</button> -->
<tr>
<td>NO</td>
<td>NAME</td>
<td>Code</td>
<td>ACTION</td>
</tr>
@if($data->count()>0)
@foreach($data as $row)
<tr>
<td>{{$loop->index + 1}}</td>
<td>{{$row->name}}</td>
<td>{{$row->code}}</td>
<td>
<button wire:click="edit({{$row->id}})" class="btn btn-sm btn-outline-danger py-0">Edit</button> |
<button wire:click="destroy({{$row->id}})" class="btn btn-sm btn-outline-danger py-0">Delete</button>
</td>
</tr>
@endforeach
</table>
<!-- <button wire:click="loadMore()" class="btn btn-info">Loand More..</button> -->
</div>
@endif
</div>
No comments