让用户决定页面中有多少项目

Question

上下文

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

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

'Showing result [from starting item - to item number X ] of itemTotal'

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 ?

我不需要构建组件的代码，只需要了解是否有一种方法可以在字段内构建计算

Answer 1

所以你有 const itemsPerPage = 25; //如果你愿意，你可以设置为用户可更改 const itemsTotal = 155; //这你会使用一个函数来获取项目的数量。</p> <p>const pageIncrements[];</p> <p>for (let pageNumber = 1; pageNumber <= itemsTotal / itemsPerPage; pageNumber++) { pageIncrements += [((pageNumber - 1) * (itemsPerPage) + 1)) + " - " + (pageNumber * itemsPerPage)] } 如果（itemsTotal % itemsPerPage > 0）{ pageIncrements += [(itemsTotal - (itemsTotal % itemsPerPage)) + " - " + itemsTotal] } 抱歉，没有使用过 react 语法，但逻辑应该是正确的。

让用户决定页面中有多少项目

Let the user decide how many items in a page

computation

reactjs