Membuat Paginasi

Saya akan membahas disini secara singkat saja dan skrip di bawah ini merupakan semua komponen Vue yaitu Pagination. Jadi beberapa di antara Anda menginginkan fitur ini ada di pembahasan CRUD dengan Inertia.js agar pengalaman menggunakan Inertia.js juga bertambah. Saya memanfaatkan data jSON dari pengeluaran datanya yang mana seperti biasa kalau Anda menggunakan paginate ada bagian meta dan links jadi saya hanya memanfaatkan links saja.

Silakan buat berkas baru bernama Pagination.vue pada direktori resources/js/Components, lalu salin dan tempelkan skrip di bawah ini pada berkas tersebut.

<template>
    <div class="my-5">
        <nav class="pagination is-rounded" role="navigation" aria-label="pagination">

            <!-- pembahasan 1 -->
            <inertia-link
                v-if="links[0].url"
                :href="links[0].url"
                class="pagination-previous"
                v-html="links[0].label"
            />

            <a
                v-else
                class="pagination-previous"
                disabled
                v-html="links[0].label"
            />

            <!-- pembahasan 2 -->
            <inertia-link
                v-if="links[links.length - 1].url"
                :href="links[links.length - 1].url"
                class="pagination-next"
                v-html="links[links.length - 1].label"
            />

            <a
                v-else
                class="pagination-next"
                disabled
                v-html="links[links.length - 1].label"
            />

            <ul class="pagination-list">
                <!-- pembahasan 3 -->
                <li
                    v-for="(item, index) in links.slice(1, -1)"
                    :key="index"
                >
                    <inertia-link
                        :href="item.url"
                        :class="[`pagination-link`, {
                            'is-current': item.active
                        }]"
                    >
                        {{ item.label }}
                    </inertia-link>
                </li>
            </ul>

        </nav>
    </div>
</template>

<script>
export default {
    props: ['links']
}
</script>

Sebelum saya menjelaskannya lebih lanjut saya harap Anda melihat data JSON dibawah ini agar penjelasan bisa dipahami melalui data ini.

links: [
    {
        active: false,
        label: "&laquo; Previous",
        url: null
    },
    {
        active: true,
        label: 1,
        url: "http://127.0.0.1:8000/users?page=1"
    },
    {
        active: false,
        label: "Next &raquo;",
        url: "http://127.0.0.1:8000/users?page=2"
    }
]

Berikut ini pembahasan yang telah disesuaikan di dalam skrip komponen dan data JSON:

  1. Akan menentukan tombol Sebelumnya yang mana terdapat kondisi yang mana if akan mengaktifkan tombol dan else akan mematikan tombol. Hal tersebut dihasil dari atribut url yang bernilai null, tentu ini dihasilkan dari data JSON yang pertama (links[0]).
  2. Akan menentukan tombol Berikutnya yang berarti kebalikan dari penjelasan pertama, tetapi tidak semuanya berbeda hanya saja akan menggunakan data JSON yang terakhir yaitu links[links.length - 1]. Kok beda cara mengambil data terakhir? tentu saja beda logika tersebut bisa dilakukan dengan penjelasan berikut, dimana data sebanyak 3 (links.length) dan dikurang 1 (- 1). Jadi, maka akan menghasilkan kunci larik berupa 2 yang berarti data terakhir karena larik dimulai dari 0.
  3. Pembahasan ini inti dari pembahasan sebelumnya yang dimana ini kan menampilkan tombol nomor halaman baik itu berupa 1, 2, 3, 4 dan bisa banyak dari itu sesuai data pos yang ada. Jadi untuk menampilkan nomor halaman tersebut harus menghapus data JSON yang pertama dan terakhir, karena itu bagian tombol sebelumnya dan berikutnya. Tentu cara tersebut bisa dilakukan dengan links.slice(1, -1) yang akan menghapus data pertama dan terakhirm cukup mudah bukan. Selanjutnya hanya melakukan perulangan dan memberikan tautan seperti layaknya tombol dari penjelasan sebelumnya.

Apa fungsi v-html? dimana fungsi tersebut digunakan untuk merender skrip HTML, soalnya pada data respon JSON memiliki ikon &laquo; (kiri) dan &raquo; (kanan). Hal tersebut tidak mungkin di keluarkan dengan cara bisa seperi {{ variabel }}} tentu tidak sesuai diharapkan.

Catatan: Hati-hati untuk menggunakan v-html sewenang-wenang dalam merender HTML karena rentan terhadap serangan XSS Attack yang akan menganggu di beberapa halaman yang menggunakan fungsi tersebut.