如何在JavaScript分页中正确计算并显示连续的记录索引

/**
 * 根据页码和每页数量获取指定页的数据。
 * @param {Array} allRecords - 包含所有记录的数组。
 * @param {number} itemsPerPage - 每页显示的记录数量。
 * @param {number} currentPage - 当前页码（从1开始）。
 * @returns {Array} 当前页的记录数组。
 */
const getPageRecords = (allRecords, itemsPerPage, currentPage) => {
  // 确保页码有效，至少为1
  if (currentPage < 1) {
    currentPage = 1;
  }

  const startIndex = (currentPage - 1) * itemsPerPage;
  // endIndex 是不包含的，所以直接是 startIndex + itemsPerPage
  const endIndex = startIndex + itemsPerPage;

  // 使用 slice 方法获取当前页的数据
  return allRecords.slice(startIndex, endIndex);
};

// 示例数据
const allRecords = [
  {id: 21, color: "red"},
  {id: 32, color: "blue"},
  {id: 52, color: "green"},
  {id: 21, color: "brown"},
  {id: 42, color: "indigo"},
  {id: 22, color: "yellow"},
  {id: 10, color: "orange"},
  {id: 11, color: "purple"},
  {id: 12, color: "pink"},
  {id: 13, color: "cyan"},
  {id: 14, color: "magenta"},
  {id: 15, color: "lime"},
  {id: 16, color: "teal"}
];

const itemsPerPage = 3;

console.log("--- 第一页数据 ---");
const page1Records = getPageRecords(allRecords, itemsPerPage, 1);
console.log(page1Records);
/*
[
  { id: 21, color: 'red' },
  { id: 32, color: 'blue' },
  { id: 52, color: 'green' }
]
*/

console.log("\n--- 第二页数据 ---");
const page2Records = getPageRecords(allRecords, itemsPerPage, 2);
console.log(page2Records);
/*
[
  { id: 21, color: 'brown' },
  { id: 42, color: 'indigo' },
  { id: 22, color: 'yellow' }
]
*/

console.log("\n--- 第五页数据 ---");
const page5Records = getPageRecords(allRecords, itemsPerPage, 5); // 最后一页只有一条记录
console.log(page5Records);
/*
[
  { id: 16, color: 'teal' }
]
*/

// 假设这是你的组件渲染逻辑
const allRecords = [
  {id: 21, color: "red"},
  {id: 32, color: "blue"},
  {id: 52, color: "green"},
  {id: 21, color: "brown"},
  {id: 42, color: "indigo"},
  {id: 22, color: "yellow"},
  {id: 10, color: "orange"},
  {id: 11, color: "purple"},
  {id: 12, color: "pink"},
  {id: 13, color: "cyan"},
  {id: 14, color: "magenta"},
  {id: 15, color: "lime"},
  {id: 16, color: "teal"}
];
const itemsPerPage = 3;
const currentPage = 2; // 假设当前是第二页

const startIndex = (currentPage - 1) * itemsPerPage;
const currentPageRecords = getPageRecords(allRecords, itemsPerPage, currentPage);

console.log(`\n--- 渲染第 ${currentPage} 页的卡片 ---`);
currentPageRecords.map((record, localIndex) => {
  const globalDisplayIndex = startIndex + localIndex + 1;
  console.log(`Card ${globalDisplayIndex} -> Index ${globalDisplayIndex}, Data: ${JSON.stringify(record)}`);
  // 在实际的UI中，这会渲染一个卡片元素
  // <div key={record.id}>
  //   <div>Card {globalDisplayIndex}</div>
  //   <div>Index {globalDisplayIndex}</div>
  //   {/* 其他记录详情 */}
  // </div>
});

/*
预期输出（对应 currentPage = 2）：
--- 渲染第 2 页的卡片 ---
Card 4 -> Index 4, Data: {"id":21,"color":"brown"}
Card 5 -> Index 5, Data: {"id":42,"color":"indigo"}
Card 6 -> Index 6, Data: {"id":22,"color":"yellow"}
*/