← Quay lại mục lục

Bài 18 — Search / Filter / Pagination

Bảng sản phẩm 27 items với search keyword + filter category + sort + pagination 10/page.

Trung bình #search #filter #pagination #sort #boundary

🔍 Bài 18: Search / Filter / Pagination

Bảng danh sách sản phẩm với search keyword, filter theo category, sort theo giá, pagination 10 items/trang. Bài tổng hợp về pagination logic + filter combinations.

📌 Test data

Hệ thống có 27 sản phẩm với 4 category: Electronics, Books, Clothing, Food.

📋 Bảng đặc tả

#TênLoạiMô tả
1Search keywordTextSearch trong name, case-insensitive, có debounce
2CategorySelectAll / Electronics / Books / Clothing / Food
3Sort by priceSelectDefault / Price ↑ / Price ↓
4Page size10 items/trang
5PaginationButtonsPrev / 1 / 2 / 3 / Next
6CounterAuto"Showing X-Y of Z results"

🎯 Quy tắc hoạt động

  1. Filter kết hợp: keyword AND category AND sort.
  2. Khi đổi filter: phải reset về trang 1.
  3. Pagination:
    • Prev disabled ở trang 1.
    • Next disabled ở trang cuối.
    • Hiển thị max 5 trang trong số trang.
  4. Empty state: hiển thị "No results found" khi không có kết quả.
  5. Counter format: Showing 1-10 of 27 results hoặc Showing 21-27 of 27 results (trang cuối có thể ít hơn 10).

🎯 Yêu cầu

  1. Test pagination boundary: trang đầu (Prev disabled), trang cuối (Next disabled), trang giữa.
  2. Test counter ở trang cuối: VD 27 results, trang 3 → "Showing 21-27 of 27".
  3. Test khi filter cho empty result.
  4. Test reset trang khi đổi filter (đang trang 3, đổi keyword → quay về trang 1).
  5. Test sort kết hợp với filter: kết quả sort đúng cả khi đã filter.
⚠️ Bug được cài cắm: pagination counter (off-by-one), filter không reset trang, Next enable sai trang cuối, empty state không hiển thị, sort không stable.
🔐

Vui lòng đăng nhập để nộp bài.

Đăng nhập
🔐

Tab dành cho giảng viên

Tab này chứa danh sách các lỗi đã cài cắm trong form. Vui lòng nhập mã giảng viên để mở khóa. Mã sẽ ghi nhớ trong phiên làm việc — chỉ cần nhập 1 lần cho cả 3 bài.