替貓老闆做管理後台 · 第 02 章
做出好找資料的列表
讓搜尋、篩選、排序與分頁一起工作，也交代結果數、選取範圍和沒有結果時怎麼辦。
貓老闆的簡報
我要找還沒上架的貓碗，不想翻五十頁。找不到時也要知道是沒資料，還是條件設太多。
——貓掌櫃官網的老闆「掌櫃」下需求時的原話
這章做什麼
做出欄位清楚、可查找的商品列表，並讓訂單與文章區保留各自需要的狀態。
動手做
- 先定列表欄位：名稱、可辨識編號、狀態與列操作；管理訂單時再依任務增加必要資訊，不把所有欄位塞進每一張表。
- 搜尋可依名稱或編號，狀態可篩選，排序選項寫清楚依據；顯示目前符合條件的筆數，並提供清除條件。
- 每頁先顯示兩筆練習資料，頁碼與上下頁都要正確；條件變更回到第一頁，避免停在不存在的頁面。
- 選取設計先限定本頁。搜尋、篩選與換頁後清除選取並更新筆數，不能讓畫面外的資料被誤操作。
- 表格有欄位標題與名稱欄。窄畫面讓資料表本身可橫向捲動，頁面其他內容正常閱讀；找不到資料時提供調整條件的方式。
親手試試
貓掌櫃管理後台 · 操作練習
所有資料均為虛構；變更只留在此頁記憶體，重新整理就重設。這是介面示範，沒有真實登入、訂單或後端。
商品管理
已選 0 筆（僅此頁）
| 名稱與編號 | 狀態 | 操作 |
|---|
找不到符合條件的資料，請清除搜尋或調整篩選。
編輯商品介紹
可試：搜尋、切換狀態、編輯未儲存就返回、勾選停用與還原。唯讀角色只模擬操作限制；正式權限仍須由後端檢查。
這樣對 AI 說
中文就可以
請把商品管理做成可查找的列表：名稱與編號、狀態、列操作；名稱或編號搜尋、狀態篩選、明確的排序及分頁，每頁先用兩筆虛構資料。顯示符合筆數，清除條件可回復清單。條件改變回第一頁，搜尋、篩選與換頁清除選取，標示僅選本頁。訂單和文章使用自己的狀態。手機只有表格區可橫向捲動，保留表格標題、欄位語意和鍵盤操作；空結果提供恢復方式。
本章驗收清單
組合兩種條件，再清除，確認結果與頁碼都一致。
- 名稱、編號與狀態條件可組合查找
- 結果筆數與目前頁正確
- 改條件或換頁會清除舊選取
- 零筆結果時知道如何恢復
- 手機不會讓整頁出現橫向捲軸
這章的相關詞條
詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。
官方參考資料
進度只存在這台瀏覽器，不上傳、不追蹤。