Top open source phân trang trong VueJS 3

Rate this post

Hiện tại đối với các lập trình font-end,ngoài việc thiết kế giao diện thân thiện vời người dùng thì trình bày dữ liệu 1 cách hiệu quả là điều vô cùng quan trọng. Ngoài việc tối ưu về hiển thị thì phải đảm bảo nó không làm chậm server khi tải.

Chính vì thế phân trang trong VueJS là một kỹ thuật vô cùng quan trọng trong và bạn nên biết. Phân trang là chia các trang dữ liệu lớn thành các phần nội dung nhỏ hơn, giúp người dùng duyệt và tìm thông tin dễ dàng hơn. Phân trang cải thiện trải nghiệm người dùng của các ứng dụng web đồng thời cải thiện hiệu suất ứng dụng bằng cách giảm thời gian tải trang.

Tuy nhiên, việc code phân trang từ đầu thật sự là làm tốn khá nhiều thời gian. May mắn là, hiện nay có rất nhiều open source được code sẵn và chia sẻ trên Github có thể giúp bạn đơn giản hóa và tăng năng suất của mình. Sử dụng thư viện phân trang có thể giúp bạn tiết kiệm thời gian và công sức, cho phép bạn tập trung phát triển các tính năng khác quan trọng hơn.

Trong bài viết này, mình sẽ chia sẻ đến các bạn top open source phân trang trong VueJS 3. Với các thông tin như giao diện, tính năng…. hi vọng nó sẽ hữu ích đối với Bạn.

Vue Awesome Paginate – GITHUB

Vue Awesome Paginate là một thư viện hiện đại và mạnh mẽ chứa nhiều thành phần phân trang nhẹ, có thể tùy chỉnh và dễ sử dụng. Được code bằng TypeScript và Vite, Vue Awesome Paginate có tất cả chức năng phân trang trong một gói không có phần phụ thuộc, giúp Bạn dễ dàng cài đặt và sử dụng.

Vue Awesome Paginate cung cấp hỗ trợ tùy chỉnh CSS cho từng thành phần, cho phép bạn tùy chỉnh giao diện của các thành phần phù hợp với thiết kế trang web của bạn. Nó có hỗ trợ RTL (từ phải sang trái), trợ giúp SEO và một số tùy chọn bản địa hóa:

Top open source phân trang trong VueJS 3

Code mặc định của Vue Awesome Paginate bạn có thể xem ở phía dưới:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”yes” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

 <vue-awesome-paginate
    :total-items="100"
    :items-per-page="5"
    :max-pages-shown="5"
    v-model="currentPage"
    :on-click="onClickHandler"
  />

[/dm_code_snippet]

Vue Use useOffsetPagination function

Vue 3 vẫn còn rất mới, do đó, có rất ít thư viện phân trang trong VueJS 3. Tuy nhiên, có một số tùy chọn dễ dàng cho các bạn; một cách là tận dụng các thư viện khác cung cấp chức năng có thể kết hợp được, chẳng hạn như Vue Use library..

Vue Use bao gồm nhiều phương thức có thể kết hợp hữu ích, chẳng hạn như phân trang cho các ứng dụng Vue 3. Vì thư viện Vue Use rất nhẹ nên nó cung cấp một cách nhanh chóng và hiệu quả để tạo phân trang trong Vue 3.

Ví dụ sau sử giới thiệu đến bạn cách sử dụng Function useOffsetPagination. Trước tiên, chúng ta cần cài đặt thư viện:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”yes” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”javascript” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

npm i @vueuse/core

import { useOffsetPagination } from '@vueuse/core'

[/dm_code_snippet]

Tùy thuộc vào trường hợp khi sử dụng, chúng ta có thể sử dụng các tùy chọn, tham số và các chức năng khác nhau cần có:

function fetch(page: number, pageSize: number) {
  return new Promise<User[]>((resolve, reject) => {
    const start = (page - 1) * pageSize
    const end = start + pageSize
    setTimeout(() => {
      resolve(database.value.slice(start, end))
    }, 100)
  })
}

const data: Ref<User[]> = ref([])
const page = ref(1)
const pageSize = ref(10)
fetchData({
  currentPage: page.value,
  currentPageSize: pageSize.value,
})

function fetchData({ currentPage, currentPageSize }: { currentPage: number; currentPageSize: number }) {
  fetch(currentPage, currentPageSize).then((responseData) => {
    data.value = responseData
  })
}

[/dm_code_snippet]

Tiếp theo chúng ta sẽ code như sau:

const {
  currentPage,
  currentPageSize,
  pageCount,
  isFirstPage,
  isLastPage,
  prev,
  next,
} = useOffsetPagination({
  total: database.value.length,
  page: 1,
  pageSize,
  onPageChange: fetchData,
  onPageSizeChange: fetchData,
})

[/dm_code_snippet]

Sau khi hoàn tất, chúng ta có thể sử dụng trực tiếp nó như sau:

<div>
  <div>
      total: {{ database.length }}
  </div>
  <div>
    <button :disabled="isFirstPage" @click="prev"> Tiếp theo </button>
    <button
      v-for="item in pageCount"
      :key="item"
      :disabled="currentPage === item"
      @click="currentPage = item"
    >
      {{ item }}
    </button>
    <button :disabled="isLastPage" @click="next">
      next
    </button>
  </div>

[/dm_code_snippet]

v-page – github

v-page là một open source phân trang đơn giản và linh hoạt dành cho VueJS 3. v-page cho phép các Bạn sửa đổi các thành phần phân trang của họ bằng nhiều chức năng khác nhau. Bạn có thể sử dụng v-page để chỉ sử dụng các thành phần bạn cần, với các vị trí có phạm vi cho các tùy chọn tùy chỉnh khác.

Bạn có thể thêm tùy chọn Tất cả vào danh sách kích thước trang, hiển thị tất cả dữ liệu không phân trang, đặt trang hiện tại, tổng số bản ghi, ngôn ngữ phân trang, menu kích thước trang, hướng căn chỉnh, v.v.

Khi dữ liệu phân trang thay đổi, thư viện v-page kích hoạt một sự kiện thay đổi. Nhìn chung, v-page là một open source tuyệt vời dành cho VueJS muốn thêm phân trang vào ứng dụng với nhiều khả năng tùy chỉnh. Nó sử dụng định dạng tiêu chuẩn sau, cho phép bạn nhanh chóng thêm các đạo cụ mới:

 <Page
    :total-row="11"
    @change="changeBasic"
  />

[/dm_code_snippet]

Top open source phân trang trong VueJS 3

Kết luận

Việc triển khai phân trang có thể cải thiện đáng kể trải nghiệm người dùng và tốc độ ứng dụng, web của bạn, cho dù bạn đang thiết kế một trang web trực tuyến cơ bản hay một chương trình kinh doanh phức tạp. Bạn có thể làm điều đó một cách nhanh chóng và dễ dàng với sự trợ giúp của thư viện phân trang.

Trong bài viết này, tôi kiểm tra ba thư viện phân trang nguồn mở tuyệt vời. Khi chọn thư viện phân trang phù hợp, điều quan trọng là phải đánh giá nhu cầu cá nhân của dự án và chức năng mong muốn. Mỗi thư viện đều có những ưu điểm và nhược điểm, vì vậy bạn nên kiểm tra cẩn thận từng thư viện và đánh giá các yêu cầu của dự án trước khi đưa ra lựa chọn.

Và các bạn nên lựa chọn các thư viện có thể tùy chỉnh để có thể chỉnh sửa nó phù hợp với giao diện web, ứng dụng mà bạn đang phát triển. Nếu bạn có bất kỳ câu hỏi nào, bạn có thể để lại nhận xét bên dưới. Cảm ơn vì đã đọc qua bài viết này. Các bạn có thể xem qua bài viết Top Front End Framework Tốt nhất bạn nên biết 2023