有人可以帮我做这种特殊的分页风格吗？ [关闭]

Question

这是我想要的分页：

('最新' = 第 1 页。[] = 当前页面)

[latest] - 2 - 3 - 4 ... 20

'previous - latest - [2] - 3 - 4 - 5 ... 20'

'previous - latest - 2 - [3] - 4 - 5 - 6 ... 20'

'previous - latest - 2 - 3 - [4] - 5 - 6 - 7 ... 20'

'previous - latest - 2 - 3 - 4 - [5] - 6 - 7 - 8 ... 20'

'previous - latest - 3 - 4 - 5 - [6] - 7 - 8 - 9 ... 20'

'previous - latest - 4 - 5 - 6 - [7] - 8 - 9 - 10 ... 20'

'previous - latest - 5 - 6 - 7 - [8] - 9 - 10 - 11 ... 20'

'previous - latest - 17 - 18 - 19 - [20]'

'previous - latest - 16 - 17 - 18 - [19] - 20'

'previous - latest - 14 - 15 - 16 - [17] - 18 - 19 - 20'

'previous - latest - 13 - 14 - 15 - [16] - 17 - 18 - 19 ... 20'

如您所见，我希望每侧始终有 3 个按钮，只要可用，不包括最后一个按钮以及上一个和最新的按钮。

我尝试过创建这种特殊的分页样式，但我做不到。我的最后一次尝试几乎成功了，它一直工作到第 7 页，然后停止工作。

无需编写完整的工作代码。我只需要有人告诉我如何使用算法来获得这种特殊的风格。假设我们已经有了 pageNumbers，它是与帖子数相对应的页面按钮数的数组，您可以通过将帖子总数除以每页帖子数得到。

我的最新想法是定义 maxLeft 和 maxRight，然后将它们分别推入我最后迭代的按钮 Array 中。我的想法是，应该首先推送 maxLeft，然后我应该在数组长度的索引处添加 currentPage，然后，我应该从该索引迭代 maxRight 5 次以获得上述结果，但它没有用。就像我说的那样，它一直有效到第 7 页。也许我的想法是错误的。我只知道必须有一些简单易用的好方法。请至少给我一些关于如何做的好主意！

Answer 1

这是一个应该可以工作的简单（ish）算法。它不是 100% 匹配你想要的，但你可以自定义更多:)

const ITEMS_AROUND = 3;

const paginate = (pages, selectedPage) => {
  const itemsBefore = pages.slice(Math.max(0, selectedPage - ITEMS_AROUND - 1), selectedPage - 1);
  const itemsBAfter = pages.slice(selectedPage, selectedPage + ITEMS_AROUND);

  const list = [
    selectedPage !== 1 && 'previous',
    selectedPage !== pages.length && 'latest',

    ...itemsBefore,
    `[${selectedPage}]`,
    ...itemsBAfter,
  ].filter(Boolean);

  if (pages.length - ITEMS_AROUND > selectedPage) {
    return `${list.join(' - ')} ... ${pages[pages.length - 1]}`;
  }

  return list.join(' - ');
};

const pages = Array(20)
  .fill(0)
  .map((_, i) => i + 1);

console.log(paginate(pages, 2));
console.log(paginate(pages, 7));
console.log(paginate(pages, 18));