时间戳

首页 > 解决方案 > MUI 表分页：如何转到上一页？

reactjs - MUI 表分页：如何转到上一页？

问题描述

我指的是来自 MUI网站的这个例子：https ://codesandbox.io/s/3sjxh?file=/demo.js:8248-8255

我不明白如何onPageChange能够同时进行导航previous和next页面工作。

      <TablePagination
          rowsPerPageOptions={[5, 10, 25]}
          component="div"
          count={rows.length}
          rowsPerPage={rowsPerPage}
          page={page}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
        />

所做handleChangePage的只是设置新page值，但它如何知道是减少count还是增加呢？

const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

标签： reactjsmaterial-ui

解决方案

但它如何知道是减少计数还是增加计数？

什么“数”？这个你可能想多了。记录总数不变。事件处理程序提供的唯一内容是用户单击的页码。

您向组件提供关键信息：

count={rows.length}
rowsPerPage={rowsPerPage}
page={page}

总行数、任何给定页面上有多少行以及当前页面。基于此信息，组件可以在内部计算（并显示为用于导航的 UI 元素）总共存在多少页面以及当前页面之前/之后的页面。

因此，如果当前页面是3并且有足够的记录来填充 6 个页面，那么组件可以轻松地确定显示第 1、2、4、5 和 6 页的链接。

当用户单击该链接时，组件会调用此onPageChange事件并为您提供用户选择的页面。该页面在页面序列中是较早还是较晚都没有关系。如果用户单击第 2 页，您将获得 value 2。如果用户点击第 6 页，您将获得值6。（或者也许1，5如果它是零索引的？）

如果组件呈现带有文本“Prev”或“Next”的链接，那么它仍然只是指向数字页面的链接。链接的文本无关紧要。

推荐阅读