[筆記] 哎呀！不小心刻了一套 React UI 元件庫 23 – Pagination

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Pagination 的實踐方法。

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

內容

參數

page – 當前頁數
pageSize – 每一頁的資料筆數
withEllipsis – 頁數過多是否用 … 省略
onChange – 當前頁碼和改變時的 callback
total – 總共的資料筆數

---

概念

1. totalPage 可以用 Math.ceil(total/pageSize) 計算而得
2. 當頁數太多時，可以考慮保留當前頁的前後即可。若要達成這個效果，可以用 filter 進行過濾，然後僅回傳一個 start-ellipsis 和 end-ellipisis。之後渲染時，將 start-ellipsis 和 end-ellipisis 換成省略符號

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/c3543027f6f86a991d9bd7409700623ed6e7a24f

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 26
• [筆記] 程式必修課！離散數學與演算法 – 25
• [筆記] 程式必修課！離散數學與演算法 – 23
• [筆記] 瀏覽器的跳轉處理之 location.href 和 location.replace
• [筆記] Vite 導入 Exceljs 輸出簡易表格