在调用分页 api 时，前端常因每页独立渲染导致序号（如 1、2、3…）重复从 1 开始，无法体现全局顺序；本文提供基于当前页码与每页条数动态计算连续序号的可靠实现方法。
在调用分页 api 时，前端常因每页独立渲染导致序号（如 1、2、3…）重复从 1 开始，无法体现全局顺序；本文提供基于当前页码与每页条数动态计算连续序号的可靠实现方法。
在分页场景中，“序号重置为 1” 是典型误解：许多开发者直接对当前页数据使用 index + 1 渲染序号（例如 Vue 的 v-for="(item, i) in list" :key="i">{{ i + 1 }}），这会导致第 2 页仍显示 1、2、3…，而非 11、12、13…（假设每页 10 条）。真正需要的是全局序号（Global Index）——它应由当前页码（page）和每页数量（pageSize）共同决定。
✅ 正确计算方式（以 1 为起始页）：
// 当前页数据在整张列表中的起始序号（从 1 开始计数）
const startIndex = (currentPage - 1) * pageSize + 1;
// 遍历时，每条记录的全局序号为：
// startIndex + index（index 从 0 开始）
list.map((item, index) => ({
...item,
globalIndex: startIndex + index
}));? 示例（React + Axios）：
function PaginatedList({ data, currentPage = 1, pageSize = 10 }) {
const startIndex = (currentPage - 1) * pageSize + 1;
return (
<table>
<tbody>
{data.map((item, idx) => (
<tr key={item.id}>
<td>{startIndex + idx}</td> {/* ✅ 连续序号 */}
<td>{item.title}</td>
<td>{item.author}</td>
</tr>
))}
</tbody>
</table>
);
}⚠️ 注意事项：
- 确保
currentPage是受控状态（如通过 URL 参数或 state 管理），避免异步加载时页码未及时更新导致序号错乱； - 若后端返回
total总数，可结合Math.min(startIndex + idx, total)做边界防护（尤其最后一页数据不足pageSize时）； - 不要依赖后端返回的“序号字段”（如
serial_no），除非该字段明确设计为全局唯一排序索引——通常它只是本页局部索引。
? 总结：序号不是页面属性，而是位置函数。只要掌握 (page - 1) * size + index + 1 这一核心公式，并在渲染层稳定应用，即可彻底解决翻页后序号归零问题，提升数据呈现的专业性与用户体验一致性。
