JavaScript分页实践：确保数据索引连续性的方法

/**
 * 根据页码和每页数量从完整数据集中获取当前页数据。
 *
 * @param {Array} fullDataArray 包含所有记录的完整数组。
 * @param {number} itemsPerPage 每页显示的记录数量。
 * @param {number} currentPage 当前页码（从1开始计数）。
 * @returns {Array} 当前页的数据数组。
 */
const getPageData = (fullDataArray, itemsPerPage, currentPage) => {
  // 确保页码有效，至少为1，防止传入负数或0
  const page = Math.max(1, currentPage);

  // 计算起始索引（在原始数组中的位置）
  const startIndex = (page - 1) * itemsPerPage;

  // 计算结束索引（不包含）
  const endIndex = startIndex + itemsPerPage;

  // 使用 slice 方法截取当前页的数据
  return fullDataArray.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: 11, color: "purple"},
  {id: 66, color: "orange"},
  {id: 77, color: "pink"},
  {id: 88, color: "black"},
  {id: 99, color: "white"},
  {id: 10, color: "gray"},
  {id: 13, color: "cyan"}
];

const recordsPerPage = 3; // 每页显示3条记录

// --- 演示第 1 页数据 ---
console.log("--- 第 1 页数据 ---");
const page1Data = getPageData(allRecords, recordsPerPage, 1);
const page1StartIndex = (1 - 1) * recordsPerPage; // 计算第一页的起始索引
page1Data.forEach((record, localIndex) => {
  const globalIndex = page1StartIndex + localIndex + 1; // 计算全局索引
  console.log(`卡片 ${globalIndex}:`, record);
});
/*
预期输出:
卡片 1: { id: 21, color: 'red' }
卡片 2: { id: 32, color: 'blue' }
卡片 3: { id: 52, color: 'green' }
*/

// --- 演示第 2 页数据 ---
console.log("\n--- 第 2 页数据 ---");
const page2Data = getPageData(allRecords, recordsPerPage, 2);
const page2StartIndex = (2 - 1) * recordsPerPage; // 计算第二页的起始索引
page2Data.forEach((record, localIndex) => {
  const globalIndex = page2StartIndex + localIndex + 1; // 计算全局索引
  console.log(`卡片 ${globalIndex}:`, record);
});
/*
预期输出:
卡片 4: { id: 21, color: 'brown' }
卡片 5: { id: 42, color: 'indigo' }
卡片 6: { id: 22, color: 'yellow' }
*/

// --- 演示第 3 页数据 ---
console.log("\n--- 第 3 页数据 ---");
const page3Data = getPageData(allRecords, recordsPerPage, 3);
const page3StartIndex = (3 - 1) * recordsPerPage; // 计算第三页的起始索引
page3Data.forEach((record, localIndex) => {
  const globalIndex = page3StartIndex + localIndex + 1; // 计算全局索引
  console.log(`卡片 ${globalIndex}:`, record);
});
/*
预期输出:
卡片 7: { id: 11, color: 'purple' }
卡片 8: { id: 66, color: 'orange' }
卡片 9: { id: 77, color: 'pink' }
*/

// --- 演示最后一页数据（数据不足一页） ---
console.log("\n--- 第 5 页数据 (总共13条记录，每页3条，第5页只有1条) ---");
const page5Data = getPageData(allRecords, recordsPerPage, 5);
const page5StartIndex = (5 - 1) * recordsPerPage; // 计算第五页的起始索引
page5Data.forEach((record, localIndex) => {
  const globalIndex = page5StartIndex + localIndex + 1; // 计算全局索引
  console.log(`卡片 ${globalIndex}:`, record);
});
/*
预期输出:
卡片 13: { id: 13, color: 'cyan' }
*/