分页
Pagination
UI 组件也叫：分页器、翻页、页码、Pager
一句话：把大量数据分成多页显示，用页码和上一页、下一页按钮在各页之间跳转。
详细解释
列表或表格的数据有成百上千条时，一次全部加载既慢又难找。分页把数据切成每页 10、20 或 50 条，底部显示页码供用户跳转。完整的分页器还有总条数、每页条数选择和「跳至第几页」输入框。
分页适合需要定位、回查的数据，比如后台订单表：用户能记住「在第 3 页」，也能直接跳到最后一页。社交动态这类随手刷的内容，更适合无限滚动或「加载更多」按钮。
分页通常放在表格或列表的右下方或底部居中。数据只有一页时应该隐藏分页，不要显示一个只有「1」的页码。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
在订单表格底部右侧放一个分页器：左边显示「共 326 条」，中间是上一页、页码、下一页，页码过多时中间用省略号，当前页用深色底白字高亮；右边是每页 10/20/50 条的下拉选择和跳页输入框。切换页码时重新请求数据并滚回表格顶部。
结构与适用场景
结构描述
由上一页和下一页按钮、页码列表、省略号组成，完整版还带总条数、每页条数选择和跳页输入框。
适用场景
- 后台表格、订单列表这类数据量大、用户需要定位或回查某一页的场景
- 搜索结果页，用户需要知道结果大概有多少、自己看到了哪里
- 数据需要按页导出、打印，或与他人按「第几页」沟通时
不适用场景
- 社交动态、图片瀑布流这类连续浏览的内容，更适合无限滚动
- 数据总共只有十几条，一页就能放下
- 手机上的长列表，小页码按钮不好点，更适合「加载更多」
常见坏用法
- 总共只有一页数据，也显示一整套分页器
- 数据有上百页却把所有页码全部列出，没有用省略号折叠
- 切换页码后页面停在底部，用户还得自己滚回表格顶部
识别特征
- 列表或表格下方一排小方块页码
- 两端有左右箭头按钮，当前页码高亮
- 页码中间可能有省略号，旁边有「共 N 条」字样
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
nav[aria-label*="pagination" i].pagination.ant-pagination.el-pagination[class*="MuiPagination-root"].arco-pagination.t-pagination.n-pagination[data-slot="pagination"]