如何计算分页页码？一个完整的指南

分页页码计算：全面指南

前言

在用户体验设计中，分页是一种至关重要的技术，它使我们能够将大量数据组织成更小的、更容易管理的部分。为了实现最佳的分页体验，我们需要一个可靠的方法来确定哪些页码应显示在导航中。本文将深入探讨如何编写一个健壮且可扩展的函数来计算分页中要显示的页码。

定义问题

我们的目标是创建一个函数，根据以下输入参数计算要显示的页码：

• 总结果数（total）
• 每页要显示的最大结果数（perPage）
• 当前页码（page）
• 要显示的最大页码数（max）

函数应返回一个包含页码的数组。

方法

1. 确定函数规则

为了确定要显示的页码，我们遵循以下规则：

• 结果的长度始终等于 max，除非总页数（totalPages）小于 max。在这种情况下，从 page 显示到 totalPages 的页码。
• 从 page 开始显示，直到达到 max 个项目（如果可用）。例如，如果 page=5，max=10，totalPages=8，则显示 5,6,7,8。如果显示的页码数少于 max，则从 1 开始显示，直到达到所需数量。
• 如果 totalPages 大于 max，则从 page 开始显示，直到下一个 max 个项目，如果显示的页码数少于 max，则回到开头，并添加差值以匹配 max 个项目。

2. 编写代码

使用这些规则，我们编写的代码如下：

import { range } from 'lodash';

function calculatePages({ total, perPage, page, max }) {
  const pages = Math.ceil(total / perPage);
  const totalPages = [...Array(pages).keys()].map((i) => i + 1);

  let start = page - 1;
  const end = start + max > max ? start + (max - 1) : start + max;

  if (end - start < max) {
    start = start - (end - (end - start));
  }

  const results = totalPages.slice(start, end);
  return results;
}

测试

为了验证函数，我们编写了以下测试用例：

const tests = [
  { in: { total: 1, perPage: 4, page: 1, max: 10 }, out: [1] },
  { in: { total: 4, perPage: 4, page: 1, max: 10 }, out: [1] },
  { in: { total: 8, perPage: 4, page: 1, max: 10 }, out: [1, 2] },
  { in: { total: 8, perPage: 4, page: 2, max: 10 }, out: [1, 2] },
  {
    in: { total: 38, perPage: 4, page: 2, max: 10 },
    out: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  },
  {
    in: { total: 40, perPage: 4, page: 2, max: 10 },
    out: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  },
  {
    in: { total: 40, perPage: 4, page: 1, max: 10 },
    out: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  },
  {
    in: { total: 40, perPage: 4, page: 9, max: 10 },
    out: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  },
  {
    in: { total: 40, perPage: 4, page: 10, max: 10 },
    out: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  },
  {
    in: { total: 90, perPage: 4, page: 1, max: 10 },
    out: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  },
  { in: { total: 70, perPage: 4, page: 17, max: 10 }, out: range(9, 19) },
];

describe('calculatePages function', () => {
  tests.forEach((t, i) => {
    test(`#${i} ${JSON.stringify(t.in)}`, () => {
      const a = calculatePages(t.in);
      expect(t.out.length).toBeLessThanOrEqual(t.in.max);
      expect(a.join(',')).toBe(t.out.join(','));
    });
  });
});

总结

本文提供了分步说明，介绍了如何编写一个函数来计算分页中要显示的页码。我们定义了函数的输入和输出、制定了函数规则、编写了代码并进行了测试。通过遵循这些步骤，您可以创建一个健壮且可扩展的函数，以处理不同的分页场景。

常见问题解答

1. 如何调整要显示的最大页码数？

   • 通过修改 max 参数，您可以控制导航中显示的页码数。

2. 如何处理边界情况，例如当前页码超出范围？

   • 函数会自动处理超出范围的页码，并确保始终显示有效的页码。

3. 这个函数可以用于不同的分页场景吗？

   • 是的，该函数可以适应不同的分页场景，包括无限滚动和前端分页。

4. 如何对函数进行定制以满足特定需求？

   • 函数可以根据需要进行定制，例如添加自定义的页码范围或过滤结果。

5. 是否有任何第三方库可以实现分页功能？

   • 存在许多第三方库，例如 Kendo UI 和 jQuery UI，提供了分页功能。但是，如果您需要高度定制的解决方案，自定义函数可能是更好的选择。