API分页数据序号异常：切换页面后序号重置为1

核心思路 #

序号不能只依赖当前页内的项索引，必须结合当前页码和每页数据条数计算全局序号，通用公式：
全局序号 = (当前页码 - 1) * 每页条数 + 当前项的索引 + 1
（注：若当前项索引从1开始，无需加1；从0开始则加1）

前端实现示例 #

原生JavaScript #

循环渲染当前页数据时直接计算：

const currentPage = 2; // 当前页码，从1开始
const pageSize = 10; // 每页展示条数
const currentPageData = [/* API返回的当前页数据数组 */];

// 渲染逻辑
currentPageData.forEach((item, index) => {
  const serialNumber = (currentPage - 1) * pageSize + index + 1;
  // 将serialNumber插入到DOM对应位置
});

Vue 模板内计算 #

<template>
  <table>
    <tr v-for="(item, index) in currentPageData" :key="item.id">
      <td>{{ (currentPage - 1) * pageSize + index + 1 }}</td>
      <td>{{ item.content }}</td>
    </tr>
  </table>
</template>

<script setup>
import { ref } from 'vue';
const currentPage = ref(1);
const pageSize = ref(10);
const currentPageData = ref([]);
// 此处编写API数据请求逻辑
</script>

React JSX内计算 #

function PagedList() {
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 10;
  const [currentPageData, setCurrentPageData] = useState([]);

  return (
    <table>
      {currentPageData.map((item, index) => (
        <tr key={item.id}>
          <td>{(currentPage - 1) * pageSize + index + 1}</td>
          <td>{item.content}</td>
        </tr>
      ))}
    </table>
  );
}

后端可选方案 #

如果希望后端直接返回带全局序号的数据，可在数据库查询时用窗口函数计算：
以MySQL为例：

SELECT 
  ROW_NUMBER() OVER(ORDER BY id) AS serial_number,
  col1, col2 
FROM your_table
LIMIT (page-1)*pageSize, pageSize;

前端直接渲染返回的serial_number字段即可，无需额外计算。

注意事项 #

• 确认当前页码的起始值：若分页组件默认页码从0开始，公式需改为currentPage * pageSize + index +1
• 序号计算与API返回的总条数无关，仅依赖当前页码和每页条数

内容的提问来源于stack exchange，提问作者Win Narno