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

Posted 2023-03-10

【中文标题】有人可以帮我做这种特殊的分页风格吗？ [关闭]

【英文标题】：Can somebody help me do this particular style of pagination? [closed]

【发布时间】：2022-01-21 17:33:31

【问题描述】：

这是我想要的分页：

('最新' = 第 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 页。也许我的想法是错误的。我只知道必须有一些简单易用的好方法。请至少给我一些关于如何做的好主意！

【问题讨论】：

向我们展示您的尝试。 SO 不是免费的代码编写服务。此处的目的是让您发布解决自己问题的尝试，并在其他人无法按预期工作时提供帮助。这也不是“如何”教程服务。还有其他类似的网站

我认为他会建议我们绝对默认大多数人的决定

【参考方案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));

【讨论】：

谢谢哥们。感谢您的快速回复。我明天要试试，因为我现在要睡觉了，如果效果好我会告诉你的。

嘿伙计。我刚刚看了你的代码，你似乎误解了我想要的东西。我不想要一个分页字符串，而是一个我可以迭代并获得这种特定样式的数组。在您的代码中，paginate 返回一个字符串。在我的示例中，- 这并不是我真正想要的，它只是一个空白空间的替代品。我想要一个可以使用map 并迭代并获得我描述的结果的数组。所以数组需要是这样的['previous', 'latest', 1, 2, 3, 4, 5, ..., 20]当前页面或选择页面不应该有[]。

在这种情况下，您可以只返回没有连接部分的数组。

是的，我已经这样做了，而且它有效，但是我现在正在尝试做 3 件事，希望你能帮助我。 1 - 第 1 页和“最新”不应同时存在。最新的是第 1 页，目前两者都存在。我们有最新的和第 1 页。 2 - ... 这些点应该消失，只要右侧包含最后一页的可用页面少于 3 个。 IE。 ... 应该仅在最后一页超过 3 页时才存在。所以，如果我们有 20 页，而你现在是 17，那么它应该是 17 - 18 - 19 ... 20，如果你继续 18，它应该是 18 - 19 - 20，没有...'

已经修复了 :) 再次感谢您的回答。