Cách triển khai phân trang cho app trong Vue

Phân trang cho phép bạn chia các tập dữ liệu lớn thành nhỏ hơn, dễ quản lý hơn. Phân trang giúp người dùng thoải mái điều hướng các tập dữ liệu lớn và tìm thấy thông tin cần thiết.

Sau đây là cách triển khai phân trang trong ứng dụng được tạo bằng Vue.

Bắt đầu với Vue-Awesome-Paginate

Vue-awesome-paginate là một thư viện phân trang mạnh mẽ và gọn nhẹ của Vue. Nó đơn giản hóa quá trình tạo hiển thị dữ liệu được phân trang, mang tới những tính năng toàn diện, API dễ dùng, đồng thời hỗ trợ các trường hợp phân trang khác nhau.

Để bắt đầu dùng vue-awesome-paginate, cài đặt gói này bằng cách chạy lệnh terminal sau trong thư mục dự án của bạn:

npm install vue-awesome-paginate

Sau đó, cấu hình gói hoạt động trong app Vue bằng cách sao chép code bên dưới sang file src/main.js:

import { createApp } from "vue";
import App from "./App.vue";

import VueAwesomePaginate from "vue-awesome-paginate";

import "vue-awesome-paginate/dist/style.css";

createApp(App).use(VueAwesomePaginate).mount("#app");

Code này nhập và đăng ký gói bằng phương thức .use(), vì thế, bạn có thể dùng nó ở bất cứ nơi đâu trong ứng dụng. Gói phân trang đi kèm với một file CSS mà khối code này cũng nhập vào.

Xây dựng ứng dụng thử nghiệm bằng Vue

Để minh họa cách package vue-awesome-paginate hoạt động, bạn sẽ xây dựng một app Vue hiện tập dữ liệu mẫu. Bạn sẽ tìm nạp dữ liệu từ API bằng Axios cho app này.

Sao chép khối code bên dưới vào file App.vue:

<script setup>
import { ref, onBeforeMount } from "vue";
import axios from "axios";

const comments = ref([]);

const loadComments = async () => {
  try {
    const response = await axios.get(
      `https://jsonplaceholder.typicode.com/comments`,
    );

    return response.data.map((comment) => comment.body);
  } catch (error) {
    console.error(error);
  }
};

onBeforeMount(async () => {
  const loadedComments = await loadComments();
  comments.value.push(...loadedComments);
  console.log(comments.value);
});
</script>

<template>
  <div>
    <h1>Vue 3 Pagination with JSONPlaceholder</h1>
    <div v-if="comments.length">
      <div v-for="comment in comments" class="comment">
        <p>{{ comment }}</p>
      </div>
    </div>
    <div v-else>
      <p>Loading comments...</p>
    </div>
  </div>
</template>

Khối code này dùng Vue Composition API để xây dựng một thành phần. Thành phần này dùng Axios để tìm nạp bình luận từ JSONPlaceholder API trước khi Vue gắn kết nó (hook onBeforeMount). Sau đó, nó chứa bình luận trong mảng comments, dùng mẫu để hiện chúng hoặc một thông báo tải cho tới khi có sẵn bình luận.

Tích hợp Vue-Awesome-Paginate vào app Vue của bạn

Giờ bạn có một app Vue đơn giản có chức năng tìm nạp dữ liệu từ API. Bạn có thể chỉnh sửa nó để tích hợp package vue-awesome-paginate. Bạn sẽ dùng tính năng phân trang này để chia bình luận thành các trang khác nhau.

Thay thế phần script của file App.vue bằng code này:

<script setup>
import { ref, computed, onBeforeMount } from 'vue';
import axios from 'axios';

const perPage = ref(10);
const currentPage = ref(1);
const comments = ref([]);

const onClickHandler = (page) => {
  console.log(page);
};

const loadComments = async () => {
  try {
    const response = await axios.get(
      `https://jsonplaceholder.typicode.com/comments`
    );

    return response.data.map(comment => comment.body);
  } catch (error) {
    console.error(error);
  }
};

onBeforeMount(async () => {
  const loadedComments = await loadComments();
  comments.value.push(...loadedComments);
  console.log(comments.value);
});

const displayedComments = computed(() => {
  const startIndex = (currentPage.value * perPage.value) - perPage.value;
  const endIndex = startIndex + perPage.value;
  return comments.value.slice(startIndex, endIndex);
});
</script>

Khối code trên thêm hai tham chiếu phản ứng khác: perPage và currentPage. Những tham chiếu này chứa số lượng mục hiển thị trên từng trang và số trang hiện tại tương ứng.

Code này cũng tạo một ref được tính toán tên displayedComments. Nó tính phạm vi của bình luận dựa trên các giá trị currentPage và perPage. Nó trả về một phần của mảng comment bên trong phạm vi đó, mà sẽ nhóm bình luận sang các trang khác nhau.

Giờ thay phần template của file App.vue bằng code sau:

<template>
  <div>
    <h1>Vue 3 Pagination with JSONPlaceholder</h1>

    <div v-if="comments.length">
      <div v-for="comment in displayedComments" class="comment">
        <p>{{ comment }}</p>
      </div>

      <vue-awesome-paginate
        :total-items="comments.length"
        :items-per-page="perPage"
        :max-pages-shown="5"
        v-model="currentPage"
        :onclick="onClickHandler"
      />
    </div>
    <div v-else>
      <p>Loading comments...</p>
    </div>
  </div>
</template>

Thuộc tính v-for để hiện danh sách trong phần template trỏ tới mảng displayedComments. Mẫu này thêm thành phần vue-awesome-paginate mà đoạn code trên đã chuyển các thuộc tính sang.

Sau khi tạo kiểu ứng dụng, bạn sẽ có một trang trông như thế này:

Click vào từng nút được đánh số, bạn sẽ thấy một nhóm bình luận khác nhau.

Giờ bạn đã có một app Vue cực kỳ cơ bản, cho thấy cách phân trang dữ liệu hiệu quả. Bạn cũng có thể dùng cuộn vô hạn để xử lý các tập dữ liệu dài trong ứng dụng. Đảm bảo bạn cân nhắc các nhu cầu của ứng dụng trước khi chọn vì phân trang và cuộn vô tận đều có ưu và nhược điểm riêng.