Monster Select: Hỗ trợ dropdown phân trang mở rộng

Giới thiệu

Trong thế giới phát triển web hiện đại, việc quản lý dữ liệu lớn trong các thành phần chọn lọc (select components) là một thách thức không nhỏ. Để giải quyết vấn đề này, chúng tôi đã cập nhật thành phần monster-select với tính năng phân trang (pagination). Tính năng này không chỉ giúp cải thiện trải nghiệm người dùng mà còn tăng cường hiệu suất cho các ứng dụng web.

Tính Năng Mới

Chúng tôi đã thêm một giao diện pagestepper vào dropdown:

Hiển thị phân trang các tùy chọn: Người dùng có thể dễ dàng điều hướng qua các trang mà không cần phải cuộn vô hạn.
Số lượng mục có thể cấu hình trên mỗi trang: Bạn có thể tùy chỉnh số lượng mục hiển thị cho phù hợp với nhu cầu của người dùng.
Hoàn toàn phản ứng (reactive): Tính năng này tự động cập nhật khi có bộ lọc và dữ liệu không đồng bộ (asynchronous data).
Hỗ trợ điều hướng bằng bàn phím: Giúp người dùng dễ dàng tương tác mà không cần chuột.
Xử lý các trường hợp đặc biệt: Tính năng này hoạt động trơn tru ngay cả khi có các bộ lọc và trang trống.

Ví dụ: Lọc từ xa + Phân trang

Dưới đây là cách cấu hình monster-select cho một trường hợp sử dụng thực tế:

html Copy

<monster-select
  data-monster-option-filter-mode="remote"
  data-monster-option-filter-position="popper"
  data-monster-option-url="/api/items?filter={filter}&page={page}"
  data-monster-option-mapping-labeltemplate="${name}"
  data-monster-option-mapping-selector="data.*"
  data-monster-option-filter-defaultValue=""
  data-monster-option-mapping-valuetemplate="${id}"
  data-monster-option-features-showremoteinfo="true"
  data-monster-option-remoteinfo-url="/api/items?count=1"
  data-monster-option-mapping-currentpage="meta.pagination.currentPage"
  data-monster-option-mapping-objectsperpage="meta.pagination.perPage"
  data-monster-option-mapping-total="meta.pagination.total"
></monster-select>

Khi API backend của bạn trả về dữ liệu dưới dạng:

json Copy

{
  "data": [
    { "id": 4, "name": "Mục 4" },
    { "id": 5, "name": "Mục 5" },
    { "id": 6, "name": "Mục 6" }
  ],
  "meta": {
    "pagination": {
      "currentPage": 2,
      "perPage": 3,
      "total": 12
    }
  }
}

Tính Năng Lọc

Bạn muốn thêm tính năng lọc? Nó đã được tích hợp sẵn. Chỉ cần kết nối với filter={filter} và thành phần sẽ tự động xử lý việc debounce, cập nhật từ xa và tính phản ứng cho bạn.

Tại Sao Chúng Tôi Xây Dựng Tính Năng Này

Các thành phần chọn lọc có thể trở nên phức tạp khi:

Bạn phải xử lý các tập dữ liệu lớn.
Các bộ lọc cần phải lấy từ xa.
Bạn muốn hỗ trợ đầy đủ bàn phím và khả năng truy cập (accessibility).
Phân trang và trạng thái cần đồng bộ hóa với logic backend.

Chúng tôi cần một giải pháp mô-đun và có thể mở rộng, phù hợp với các ứng dụng web hiện đại. Do đó, chúng tôi đã xây dựng tính năng này vào MonsterJS và mã nguồn đã được mở.

Khám Phá Thêm

Git: gitlab.schukai.com/.../monsterjs-org
Tài liệu & Demo Thực Tế: monsterjs.org

Thành phần monster-select chỉ là một phần của bức tranh lớn hơn. Thư viện cũng bao gồm quản lý trạng thái phản ứng, định tuyến, và các tính năng khác.

Chúng tôi xây dựng MonsterJS cho các nhà phát triển muốn có cấu trúc mà không bị nặng nề – và các thành phần chỉ cần hoạt động.

Tóm Tắt

Monster Select giờ đây hỗ trợ phân trang đầy đủ.
Hoạt động với dữ liệu không đồng bộ và lọc từ xa.
Mã nguồn mở tại monsterjs.org.

Hãy thử nghiệm, fork, hoặc xây dựng trên nền tảng này.