分页Pagination

订单列表：翻页切片，订单行、范围、当前页码一起换

亲手翻页、改每页条数、跳页、导出本页——看订单行内容、「第 X-Y 条，共 Z 条」范围和当前页码高亮如何长在物件上，首末页到头如何禁用并写明原因。

面板教会的知识点

把刚才在订单列表上看到的现象命名为六条规则。

• 翻页 = 切片结果：点页码或上一页/下一页，上方订单行立即换成该页的数据条目——结果长在订单物件上，不只靠底部说明。
• 范围标注同步：「第 X-Y 条，共 Z 条」随翻页即时变化，与每页条数和总数对齐，让用户随时知道看到的是哪一段。
• 当前页码墨色实心：当前页用 aria-current="page" 加墨色填充，跟着翻页移动；不用颜色独撑，形状（实心 vs 描边）也能区分。
• 首末页到头禁用：第一页「上一页」、最后一页「下一页」用 disabled 并写明原因，不静默无效点击。
• 每页条数改 → 页数重算：总数 ÷ 每页条数 = 页数；改每页条数后页数与分组重算，当前页校正，避免落到空页。
• 页码多时 … 折叠：页码很多时（如每页 5 条 → 10 页），中间用省略号折叠，首尾与当前页邻域始终可见。

什么时候用分页

从用户任务判断，而不是「列表很长就加分页」。

怎么用：从总数到可分享当前页的最短路径

一次到位的检查顺序。

1. 定总数与每页条数：总数来自数据源；每页条数给用户选（如 5/10/20），用 select 并写清「每页 N 条」。
2. 算页数并切片：页数 = ceil(总数 ÷ 每页)；当前页 = clamp(当前页, 1, 页数)；渲染当前页切片。
3. 给上一页 / 页码 / 下一页：当前页 aria-current="page"；首末页边界禁用并写明；页码多时省略号折叠。
4. 同步范围标注：同屏显示「第 X-Y 条，共 Z 条」与「第 N / M 页」，随翻页即时更新。
5. 给 a11y 与键盘：页码支持 Tab、方向键、Home/End、Enter；翻页结果通过 aria-live 告知。
6. 同步 URL：把 page 与每页条数写进查询参数（?page=3&size=10），刷新或分享能回到同一页。

同一订单列表的正反例

目标都是分页 47 条订单。差别只在于范围、边界、页数重算是否守规则。