切出目前頁
用 page、pageSize 與 slice 算出本頁三筆資料。
CHAPTER 22 · 180 MINUTES
產品列表、資料渲染與分頁
資料很多時，不把整座書架倒出來；依頁碼切出一小段，再讓卡片、頁碼與按鈕同步。
3筆／每頁
3個明確任務
2個頁面邊界
LEARNING GOALS
本章結束時，你能做出什麼
集中更新畫面
只用一個 render 同步卡片、頁碼與控制狀態。
守住首末頁
第一頁不能再上一頁，最後一頁不能翻到空白。
PROBLEM & ANALOGY
不是刪資料，而是一次拿一層書架
第 21 章已取得並正規化產品；本章完整陣列仍保留，只依 currentPage 算起點與終點，再用 slice 取得本頁。
本章要解決：頁碼、卡片與按鈕若各自更新，容易不同步或翻到空白頁。
合回共同作品：產品案例會成為作品集中的可操作資料頁。
把名詞對回畫面與程式
- currentPage
- 目前顯示的頁碼狀態。
- pageSize
- 每頁最多顯示幾筆資料。
- slice(start, end)
- 取出本頁資料，end 不包含在結果內。
- totalPages
- 用總筆數與 pageSize 算出的最後頁碼。
- disabled
- 真正阻止邊界按鈕操作，不只是變灰。
SCOPE
今天的學習邊界
能自己完成
page、pageSize、slice、totalPages、render 與 disabled。
看得懂即可
offset 是從第幾筆開始；能代入數字，不要求背英文。
刻意延後
伺服器分頁、無限滾動、虛擬清單與 URL query 同步。
CORE IDEAS
頁碼是狀態，render 是唯一出口
- 起點是
(page - 1) * pageSize，終點是start + pageSize。 slice(start, end)不包含 end，也不會改掉原陣列。- totalPages 使用資料筆數除以 pageSize 後向上取整。
- 事件只改 page，再呼叫 render；render 同步卡片、頁碼與按鈕。
DEBUGGING
先把公式代入數字
課堂刻意錯誤：允許 currentPage 超過 totalPages，或只加灰色 class、沒有真的設定 disabled。
- 印出 currentPage、pageSize、start、end 與 totalPages。
- 用第一頁與最後一頁實際代入，確認 slice 不包含 end。
- 空白頁先查 page 是否越界，再查資料。
- 確認 disabled 屬性與事件條件一致，不只改外觀。
- 重跑「第一頁上一頁、最後頁下一頁」兩個邊界。
切換後出現空白頁
先查：印出 currentPage、start、end、totalPages，查頁碼是否越界。
頁碼和卡片對不上
先查：確認事件只改 page，再由同一個 render 更新畫面。
按鈕看似停用仍能點
先查：檢查 disabled 屬性與事件條件。
PRACTICE CONTRACT
Starter 到 Solution 使用同一批產品
開始前先確認這四件事
- 我先測試關鍵字、價格與無結果。
- 我能用數字代入 start、end 與 totalPages。
- 原始陣列不會因 slice 被切掉。
- 我會測試第一頁上一頁與最後頁下一頁。
依關鍵字與價格查找產品
檔案：script.js
位置：getFilteredProducts()
結果：可以關鍵字、價格或兩者查找產品
分頁並渲染查找結果
檔案：script.js
位置：getPageItems()、render()
結果：查找結果每頁最多三筆，卡片與頁碼同步
限制上一頁與下一頁邊界
檔案：script.js
位置：updateControls()
結果：首末頁按鈕正確停用，無查找結果時顯示 0 / 0 且兩鍵停用
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
目前第 ______ 頁，每頁 ______ 筆，start 是 ______、end 是 ______；totalPages 是 ______。
證據要包含無結果狀態；0 / 0 與兩個停用按鈕也是產品體驗的一部分。
錄下從第一頁翻到最後一頁的操作，畫面須同時看見產品、頁碼與停用按鈕；再口頭代入第二頁的 start、end。
下一章：從讀取產品轉向驗證使用者輸入並安全 POST。