如何使用 React Material UI 将分页添加到长列表中？答案

【问题标题】：How to add pagination to a long list using React MaterialUI?如何使用 React Material UI 将分页添加到长列表中？
【发布时间】：2020-08-29 14:45:13
【问题描述】：

我正在使用 react + materialUI 来实现列表和过滤器功能。该列表预计将由 Http 请求填充，并且可以包含大量列表项。因此，出于这个原因，我正在研究 MaterialUI 文档中的分页，但没有明确的实现。我想提供我的列表并希望分页组件打破数据并显示在多个页面上。

这是 materialUI 组件的链接：https://material-ui.com/components/pagination/

对如何进行此操作有任何帮助吗？

Picture of the List view.

编辑：我想将列表项实现为可点击组件，以便在单击时重定向到特定于列表项的仪表板。

更新：我已经使用 material-ui 分页组件实现了它。工作正常！

演示：https://codesandbox.io/s/material-demo-g0xo5?file=/demo.js

【问题讨论】：

它像表格或列表视图？
它是一个列表。我得到一个数组作为响应，我正在循环它以生成 s。我正在使用材料组件。
我认为您应该决定一页上应该显示多少项目并在您的状态下存储页码，然后显示应该在该页面中显示的项目。喜欢yourItemList.subarray(((pageNumber - 1)*(numberOfItemsForPage)), ((pageNumber)*(numberOfItemsForPage)))
是的，这就是我要做的，但我认为角度材料有一个分页器组件，我认为反应材料也必须是这种情况，我在这里遗漏了一些东西。
感谢代码沙箱！

标签： javascript reactjs pagination material-ui

【解决方案1】：

我认为您应该决定应该在一页上显示多少项目并在您的状态中存储一个页码，然后显示应该在该页面中显示的项目。喜欢yourItemList.subarray(((pageNumber - 1)*(numberOfItemsForPage)), ((pageNumber)*(numberOfItemsForPage) - 1)) 您可以将其与材料 ui 分页结合使用，应该可以正常工作！

【讨论】：

【解决方案2】：

我最近用以下 sn-p 处理了这个问题（考虑我的示例需要处理复杂对象）：

<Pagination count={data.sub.length%10===0 ? data.sub.length/10 : data.sub.length/10 +1} page={page} onChange={(event,val)=> setPage(val)}  />

对于我的示例，我希望每页呈现 10 个项目（因此除以 10），并且我计算了是否应该使用模数和三元运算符呈现尾随元素。在此之后，提供对当前页面的引用并挂钩以更改当前页面将达到预期的结果。请记住，最相关是在 DOM 上每个页面呈现的元素数量。

【讨论】：