JavaScript分页切换时如何正确计算并显示记录的连续索引

嗨，我来帮你搞定这个分页后索引不连续的问题～

你现在遇到的核心问题是：当前用的++i是基于当前页的局部数组索引来计算的，所以每切换一页，索引都会从1重新开始。要实现连续索引，我们需要结合分页的上下文（比如当前页码、每页条数）或者全局记录来计算。

下面给你两种实用的解决方案：

方案一：利用当前页码和每页条数计算（推荐） #

这是最高效的方式，只要你能获取到currentPage（当前页码，从1开始）和pageSize（每页显示的条数，这里是3），就能直接算出连续索引：

计算公式是：(currentPage - 1) * pageSize + i + 1

• (currentPage - 1) * pageSize：算出当前页之前所有页的总记录数
• i：当前页数组的索引（从0开始）
• +1：把索引从0起始改成1起始，符合你想要的显示效果

代码示例：

// 假设你有这两个变量：
const currentPage = 2; // 当前是第2页
const pageSize = 3; // 每页3条

records.map((e, i) => {
  const continuousIndex = (currentPage - 1) * pageSize + i + 1;
  return (
    <div>
      <div>Card {continuousIndex}</div>
      <div>Index {continuousIndex}</div>
    </div>
  );
})

这样第2页的三条记录就会显示4、5、6，完美符合你的预期～

方案二：通过全局记录数组匹配索引 #

如果你能拿到所有记录的全局数组globalRecords，也可以通过匹配每条记录的唯一标识（比如id）来找到它在全局中的位置，再计算连续索引：

// globalRecords是所有13条记录的数组
records.map((e, i) => {
  // 找到当前记录在全局数组中的索引（注意：如果id有重复，要换唯一标识）
  const globalIndex = globalRecords.findIndex(item => item.id === e.id);
  const continuousIndex = globalIndex + 1; // 转成1起始的索引
  return (
    <div>
      <div>Card {continuousIndex}</div>
      <div>Index {continuousIndex}</div>
    </div>
  );
})

不过这种方法要注意，如果记录的id不唯一，会导致索引计算错误，所以优先用方案一哦。

备注：内容来源于stack exchange，提问作者learntocode2468