Tanggal :15 Juli 2020
Membuat Pagination Tanpa Reload Laravel Livewire

Belajar Laravel Livewire : Membuat Pagination Tanpa Reload

Artikel ini bagian ke 7 dari 8 seri dalam artikel berseri "Belajar Laravel Livewire"

Assalamualaikum Warohmatulloh Wabarokatuh, setelah terakhir kita membuat validasi form. Kali ini kita akan membuat pagination tanpa reload halaman dengan Laravel Livewire.

Mungkin kawan kawan berekspektasi membuat pagination ini akan gampang. Yap, betul memang gampang kok tinggal ganti aja method get() dengan paginate(), baiklah mari kita coba ubah kode pada method render() di component StudentIndex.

public function render()
{
    return view('livewire.student-index',  [
        'students' => Student::latest()->paginate(5),
    ]);
}

Kemudian tentunya kita harus menambahkan links() pada file viewnya, maka kita akan tambahkan pada file student-index.blade.php.

<div>
   @foreach ($students as $student)
       <livewire:student-single :student="$student" :key="$student->id"/>
   @endforeach

   {{ $students->links() }}
</div>

Kemudian coba dibuka kembali halamannya, akan ada link untuk paginationnya, kemudian coba klik halaman berikutnya.

Membuat Pagination Tanpa Reload Halaman
Livewire Pagination

BOOOM!!! apa yang terjadi? haha masih reload ya halamannya, ya emang gampang tapi ya harus ditambahi bumbu sedikit lagi biar ngga pake reload.

Jadi, Livewire menyediakan sebuah traits WithPagination untuk menangani hal tersebut, semua proses sama dengan Laravel biasanya, cuma kita butuh untuk menambahkan traits ke dalam component.

Dalam kasus ini, kita akan menambahkan pada component StudentIndex jadi kurang lebih seperti ini kodenya.

<?php

namespace App\Http\Livewire;

use App\Student;
use Livewire\Component;
use Livewire\WithPagination;

class StudentIndex extends Component
{
    use WithPagination;
.....
}

Dan setelah itu coba refresh dulu halamannya dan coba untuk lakukan klik pada link pagination. VOILAA, paginationnya sekarang bisa berjalan tanpa reload ya? mudah bukan?

Jadi seperti itu cara membuat pagination tanpa reload menggunakan Laravel Livewire, semoga bermanfaat.

Wassalamualaikum Warohmatulloh Wabarokatuh.

Hi Saya Amirul, Saya mengajarkan koding melalui screencast di Kawan Koding, saya juga menulis Artikel di Kawan Koding.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *