Membuat Pagination di NuxtJS

March 31, 2021 3 min read
Belajar bagaimana membuat Pagination di NuxtJS menggunakan Nuxt Content Methods.

Pagination atau halaman pada list postingan blog bermanfaat bagi pengunjung agar halaman yang ditampilkan di perangkat pengunjung tidak terlalu panjang, serta akan meningkatkan pengalaman pengguna daripada satu halaman yang panjang.

Jika kita membuat blog dengan nuxt-content menggunakan starter template, biasanya tidak memiliki pagination, jadi kita harus menambahkannya secara manual.

Case yang akan saya pakai adalah blog ini sendiri. Saya menggunakan starter template dari Jose Silva (pernah saya bahas pada postingan sebelumnya yang berjudul Membuat Blog Dengan Nuxt Content).

Dimana pada starter template ini tidak memiliki Pagination, jadi semua postingan blog ini awalnya ditampilkan di satu halaman. Dan menurut saya membuat pengunjung ribet karena halaman jadi panjang sekali. Bayangkan jika di blog ini memiliki 100 artikel dan ditampilkan hanya di satu halaman. 😂

Untuk itu saya menambahkan Pagination dengan menggunakan beberapa Methods standart Nuxt Content, seperti skip(n), dan limit(n).

Membuat Pagination di NuxtJS

Pertama, tambahkan variabe pageNumber dan perPage yang akan kita gunakan untuk menampung berapa jumlah artikel yang akan ditampilkan dalam satu halaman.

<template>
    ...
</template>

<script>
export default {
  data () {
    return {
      posts: [],
      isLoading: true,
      pageNumber: this.$route.query.page ? this.$route.query.page : 1,
      perPage: 6 // Jumlah artikel yang ditampilkan dalam satu halaman
    }
  },
}
</script>

Lakukan sedikit modifikasi pada metode fetch() dengan menambahkan limit dan skip.

<template>
    ...
</template>

<script>
export default {
  ...
  methods: {
    // Mengambil list artikel
    async fetchBlogs () {

      // if pada statement ini berfungi untuk menghilangkan screen flicker saat mengunjungi antar halaman
      if (this.posts.length <= 0) this.isLoading = true

      this.posts = await this.$content({ deep: true })
      .sortBy('publishedAt', 'desc')
      .skip((this.pageNumber - 1) * this.perPage)
      .limit(this.perPage)
      .fetch()

      this.isLoading = false
    },
    ...
  },
}
</script>

Selanjutnya, tambahkan fungsi prevPage, nextPage dan configurePage di dalam methods:{ } untuk melakukan handling saat tombol di klik.

<template>
    ...
</template>

<script>
export default {
    ...
  methods: {
    ...
    // Halaman sebelumnya
    prevPage () {
      this.pageNumber--
      this.configurePage()
    },

    // Halaman selanjutnya
    nextPage () {
      this.pageNumber++
      this.configurePage()
    },

    // Konfigurasi halaman
    configurePage () {
      this.$router.push({ query: { page: this.pageNumber } })
      this.fetchBlogs()
    }
    ...
  },
}
</script>

Setelah itu tambahkan async di dalam mounted().

<template>
    ...
</template>

<script>
export default {
  ...
  methods: {
    ...
  },

  mounted () {
    this.fetchBlogs()
  }
  ...
}
</script>

Terakhir, tambahkan tombol Prev dan Next pada <template> ... </template>, dan kurang lebih secara keseluruhan kode dari tutorial diatas seperti berikut.

<template>
    ...
    <button class=" ... " @click="prevPage" :disabled="pageNumber <= 1">Previous</button>
    <button class=" ... " @click="nextPage" :disabled="pageNumber >= posts.length">Next</button>
    ...
</template>

<script>
export default {
  data () {
    return {
      posts: [],
      isLoading: true,
      pageNumber: this.$route.query.page ? this.$route.query.page : 1,
      perPage: 6 // Jumlah artikel yang ditampilkan dalam satu halaman
    }
  },

  methods: {
    // Mengambil list artikel
    async fetchBlogs () {

      // if pada statement ini berfungi untuk menghilangkan screen flicker saat mengunjungi antar halaman
      if (this.posts.length <= 0) this.isLoading = true

      this.posts = await this.$content({ deep: true })
      .sortBy('publishedAt', 'desc')
      .skip((this.pageNumber - 1) * this.perPage)
      .limit(this.perPage)
      .fetch()

      this.isLoading = false
    },

    // Halaman sebelumnya
    prevPage () {
      this.pageNumber--
      this.configurePage()
    },

    // Halaman selanjutnya
    nextPage () {
      this.pageNumber++
      this.configurePage()
    },

    // Konfigurasi halaman
    configurePage () {
      this.$router.push({ query: { page: this.pageNumber } })
      this.fetchBlogs()
    }
    ...
  },

  mounted () {
    this.fetchBlogs()
  }
}
</script>

Itulah cara menambahkan Pagination di NuxtJS, perlu di ingat, jika kamu menggunakan starter template mungkin ada sedikit perbedaan pada metode yang dipakai.


Terima kasih sudah membaca artikel "Membuat Pagination di NuxtJS"
Bagikan
Silahkan Login untuk berkomentar.