DATA TABLE
表格分页Table Pagination
大数据集在表格底部的分页控件，告诉用户当前在哪一页，并允许跳转。
效果预览
…
适合用在哪
后台列表、订单管理、用户管理、任何超过 20 条的数据表。
不适合：数据量小于 20 条时不需要分页；需要用户快速跳转到任意页码时，建议加输入框跳转而不是只点页码。
和相近模式的区别
分页控件Pagination
int-pagination 是通用分页控件；tb-pagination 特指表格底部的分页，包含「共 N 条」元信息和更适合数据表的页码展示。
虚拟滚动Virtual Scroll
虚拟滚动适合无限滚动的大数据表；Pagination 适合需要明确页码、可分享链接的后台列表。
容易踩的坑
- 页码按钮组没有 aria-label，读屏用户不知道那是分页。
- 当前在第 1 页时仍显示「上一页」按钮，虽然 disabled 但容易误导。
- 总页数很多时没有省略号，把 100 个页码全列出，面板被撑爆。
设计提示词 · Prompt
表格分页（Table Pagination）：表格底部一行：左侧「共 128 条」等元信息，右侧页码按钮组。按钮组：「‹ 上一页」+ 首页页码 1 + 省略号 + 连续页码 + 省略号 + 尾页页码 + 「下一页 ›」。当前页码实心品牌色；省略号不可点。页码按钮 32-36px、圆角 8px。移动端简化：只保留上一页/下一页 + 当前页/总页数。
Table Pagination: a row at the bottom of a table. Left: meta text like "128 items total". Right: page buttons: "‹ Previous", first page 1, ellipsis, a window of consecutive pages around the current page, ellipsis, last page, "Next ›". Current page uses solid brand background. Other pages use white/transparent background with light gray hover. Button size 32-36px, 8px radius. Ellipsis is not clickable. Mobile simplification: Previous/Next + current/total.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
/* <nav aria-label="分页"><div class="pagination"><span>共 128 条</span><button>‹</button><button class="is-on">1</button><button>2</button><button>3</button><span>…</span><button>13</button><button>›</button></div></nav> */
.pagination { display: inline-flex; align-items: center; gap: 6px; }
.pagination button { min-width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font: 14px/1 system-ui, sans-serif; }
.pagination button:hover:not(:disabled) { background: #f3f4f6; }
.pagination button.is-on { background: #4f46e5; color: #fff; }
.pagination button:disabled { color: #d1d5db; cursor: not-allowed; }
.pagination span { padding: 0 4px; color: #9ca3af; font-size: 13px; }
演示 HTML 结构
<div class="s d-center" style="width:100%">
<div class="tb-page">
<span class="tb-page__meta">共 128 条</span>
<div class="tb-page__btns">
<button type="button" disabled>‹</button>
<button class="is-on" type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<span class="tb-page__dots">…</span>
<button type="button">13</button>
<button type="button">›</button>
</div>
</div>
</div>
常见问题
省略号处要不要让用户输入页码？
数据量大时建议提供「跳转到第 X 页」输入框；常规场景用省略号 + 首尾页足够。
分页是否需要同步到 URL？
后台列表建议同步 page 到 URL query，刷新后仍保留位置；弹窗内的分页不需要。
常见搭配
同一页面里经常和「表格分页」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。