让用户决定一个页面中有多少项答案

【问题标题】：Let the user decide how many items in a page让用户决定一个页面中有多少项
【发布时间】：2020-01-26 21:52:11
【问题描述】：

上下文

我们有一个包含 155 个元素的表格，

我想在每个页面上建立这个字段，

'显示itemTotal的结果[从起始项目-到项目编号X]'

StartingItem = 1 ----->在第 1 页

ItemNumberX = 用户可以看到接下来的 25 个项目

这是实际的页面过滤器

这些是我实际拥有的数据

  const minShowData = currentPage === 1 ? 1 : (currentPage - 1) * itemsPerPage;
  const itemsAtCurrentPage = currentPage * itemsPerPage;
  const maxShowData =
    totalCount > itemsAtCurrentPage ? itemsAtCurrentPage : totalCount;
  const showElement = [5, 10, 20, 25, 50]; ----> this is the old pagination

我们通过 reducer 获得数据 itemsPerPage，并表示我们将在页面中看到多少项目，在第二个字段中，risultati per pagina 设置为 2。

这就是变量showElement 的显示方式

有一种方法可以利用这些数据来制作像

这样的过滤器

Showing results [1-25, 26-50, 51-75 ...] of 155?

我不需要代码来构建组件，只要了解是否有办法在字段内构建计算

【问题讨论】：

那么您是从用户那里获得步数，还是您预先定义了步数？如果您有显示 20-30 个项目，则使用 totalitems/numberOfItems 的 for 循环，所以 101/20 = 5，所以第一个是 (1-1)*(20)+1 和 1*(20)，第二个是 (2-1)*(20)+1 和 2*20 等。请务必在 for 循环后的末尾进行模数检查，因此 101%20 = 1，会有一个额外的页面最后剩下的项目。
要明确一点：第一种情况）我有 155 个项目，用户每次每页将看到 25 个项目，他可以选择要查看的项目索引。 Ex: 1-25, 26-50, 51-75 etc. 2nd Case) I-ve 30 items, items可以看到项目1-25, 26-30。我认为这是一个预先定义的步数。用户只能看到 25 范围内的项目。
所以这是一个回显正确输出以说明您在项目方面所在页面的情况？
是的，就是这种情况。例如）如果我想查看项目 26-50（如果它们存在的话）我将在第二页，我需要在该字段中显示 26-50。如果我点击 51-75，我将在第三页，我需要在字段中显示 51-75。

标签： reactjs computation

【解决方案1】：

所以你有 const itemsPerPage = 25; //this you can set to be user alterable if you want const itemsTotal = 155; //this you'd use a function to go get the number of items.

const pageIncrements[];

for (let pageNumber = 1; pageNumber 0) { pageIncrements += [(itemsTotal - (itemsTotal % itemsPerPage)) + " - " + itemsTotal] } 抱歉，还没有使用 react 语法，但逻辑应该是正确的。

【讨论】：