Kita akan belajar bagaimana membuat pagination pada laravel livewire secara otomatis. Namun sebelumnya pastikan kalian sudah mengikuti tutorial sebelumnya tentang bagaimana cara membuat aplikasi web menggunakan Laravel Livewire
Baca Juga: Cara Instal Laravel Livewire
Latar Belakang
Ketika kalian membangun sebuah aplikasi tentu tidak semua data ditampilkan begitu saja di halaman utama. Hanya segelintir saja, namun ketika user ingin melihat data yang lebih banyak. Kita akan menyediakan tombol untuk melihat data data yang lain
Ini merupakan fungsi dari pagination. Sebuh fitur dimana satu halaman hanya me-load sedikit data, namun data yang lain akan disimpan pada page yang lain
Bagaimana Cara Membuatnya?
Pertama, masukkan perintah berikut
use WithPagination
yang diimport dari folder Livewire\WithPagination
Lalu ketika ingin memasukan data ke dalam view, tambahkan method ->pagination(data yang ingin ditampilkan). Kalian bisa memasukkan bebas angka berapa saja, disini saya akan menampilkan 5 data
public function render()
{
$data = User::latest()->paginate(5);
return view('livewire.create-user', ['data' => $data]);
}
Lalu setelah itu, tambahkn kode berikut untuk menyisipkan tombol nomor halaman
<div class="my-2">
{{$data->links('pagination::bootstrap-5')}}
</div>
Secara default pagination menggunakan Tailwind sebagai framework CSS. Kalo kalian menggunakan framework Bootstrap, kalian bisa menambahkan parameter seperti kode diatas.
Maka hasilnya akan menjadi seperti berikut
