JavaScript 分页场景下如何正确计算并显示连续记录索引

/**
 * 根据页码和每页数量获取当前页的数据
 * @param {Array} data - 完整的记录数组
 * @param {number} itemsPerPage - 每页显示的记录数量
 * @param {number} currentPage - 当前页码 (从1开始)
 * @returns {Array} 当前页的记录数组
 */
const getPageData = (data, itemsPerPage, currentPage) => {
  // 确保页码有效，至少为1
  const page = Math.max(1, currentPage); 
  const startIndex = (page - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  return data.slice(startIndex, endIndex);
};

// 示例：一个包含多条记录的完整数据集
const fullDataset = [
  {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: 77, color: "purple"},
  {id: 88, color: "orange"},
  {id: 99, color: "pink"},
  {id: 101, color: "black"},
  {id: 112, color: "white"},
  {id: 123, color: "grey"},
  {id: 134, color: "cyan"}
];

const itemsPerPage = 3;

// 获取第一页数据
const page1Data = getPageData(fullDataset, itemsPerPage, 1);
console.log("--- Page 1 Data ---");
console.log(page1Data);
// 预期输出：[{id: 21, color: "red"}, {id: 32, color: "blue"}, {id: 52, color: "green"}]

// 获取第二页数据
const page2Data = getPageData(fullDataset, itemsPerPage, 2);
console.log("\n--- Page 2 Data ---");
console.log(page2Data);
// 预期输出：[{id: 21, color: "brown"}, {id: 42, color: "indigo"}, {id: 22, color: "yellow"}]

// 获取第五页数据（超出总记录数，返回空数组或部分数据）
const page5Data = getPageData(fullDataset, itemsPerPage, 5);
console.log("\n--- Page 5 Data ---");
console.log(page5Data);
// 预期输出：[{id: 134, color: "cyan"}]

// 假设我们已经通过 getPageData 获取了当前页的数据
const itemsPerPage = 3;
const currentPage = 2; // 当前在第二页

const pageData = getPageData(fullDataset, itemsPerPage, currentPage);

console.log(`\n--- Rendering Page ${currentPage} with Continuous Indices ---`);
pageData.forEach((record, indexInPage) => {
  const displayIndex = (currentPage - 1) * itemsPerPage + indexInPage + 1;
  console.log(`Card ${displayIndex} -> ID: ${record.id}, Color: ${record.color}`);
  // 在实际的UI框架中，这里会是渲染卡片/列表项的地方
  // 例如在React中:
  // <div key={record.id}>
  //   <div>Card {displayIndex}</div>
  //   <div>Index {displayIndex}</div>
  //   <div>ID: {record.id}, Color: {record.color}</div>
  // </div>
});

// 预期输出：
// --- Rendering Page 2 with Continuous Indices ---
// Card 4 -> ID: 21, Color: brown
// Card 5 -> ID: 42, Color: indigo
// Card 6 -> ID: 22, Color: yellow

const currentPage3 = 3;
const page3Data = getPageData(fullDataset, itemsPerPage, currentPage3);
console.log(`\n--- Rendering Page ${currentPage3} with Continuous Indices ---`);
page3Data.forEach((record, indexInPage) => {
  const displayIndex = (currentPage3 - 1) * itemsPerPage + indexInPage + 1;
  console.log(`Card ${displayIndex} -> ID: ${record.id}, Color: ${record.color}`);
});
// 预期输出：
// --- Rendering Page 3 with Continuous Indices ---
// Card 7 -> ID: 77, Color: purple
// Card 8 -> ID: 88, Color: orange
// Card 9 -> ID: 99, Color: pink