反应表使用分页不应用分页

Question

Codesandbox 示例：https://codesandbox.io/s/react-table-pagination-not-working-xt4yw

我正在使用反应表包(版本 7.1.0(。

我有一个表格，上面显示了一些发票。

我在初始加载时检索所有数据。然后，我想对此数据应用客户端分页，以便一次只显示某些结果。

我的数据中有 139 个项目。

用户最初将看到 10 个结果，并能够"显示更多"。目前，这是在选择字段中实现的，该字段更新pageSize

(在我的示例中，我使用的是不是来自任何端点的假数据。

我使用usePagination钩子的方式与此官方示例中相同：https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination?file=/src/App.js

useTable(
{
columns,
data,
initialState: { pageIndex: 0, pageSize: 10 }
},
useSortBy,
usePagination
);

但是，我一定缺少一些东西，因为尽管显然设置了pageIndex和pageSize，但分页仍未应用。

"pageIndex": 0,
"pageSize": 10,

所有结果一次显示，而不是只有 10 个。

此处未应用分页的原因是什么？

代码沙盒示例：https://codesandbox.io/s/react-table-pagination-not-working-xt4yw

Answer 1

您正在迭代rowstable.jsx，这与预期结果相反。rows是数据保存的所有行的列表，如 API 文档中所述：

从原始数据数组和传递到表选项的列的具体化行对象的数组

您应该使用的是page，如usePagination文档中所述：

当前

页的行数组，由当前pageIndex值确定。

这是实现此更改的代码沙箱的一个分支。您遍历"行"元素的所有地方都已更改为迭代"页面"，并且它按预期工作。

Answer 2

也许你可以试试这个：

function Table({
columns,
data,
updateMyData,
}) {
const defaultColumn = React.useMemo(
() => ({
// Let's set up our default Filter UI
Filter: false,
}),
[]
)
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
flatColumns,
prepareRow,
setColumnOrder,
state,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn,
updateMyData,
initialState: { pageIndex: 0, pageSize: 10 },
},
useColumnOrder,
usePagination
)
const spring = React.useMemo(
() => ({
type: 'spring',
damping: 50,
stiffness: 100,
}),
[]
)
return (
<>
<br></br>
<div>Showing the {page.length} </div>
<br></br>
<div className="pagination" >
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
{'<<'}
</button>{' '}&nbsp;
<button onClick={() => previousPage()} disabled={!canPreviousPage}>
{'<'}
</button>{' '}&nbsp;
<button onClick={() => nextPage()} disabled={!canNextPage}>
{'>'}
</button>{' '}&nbsp;
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
{'>>'}
</button>{' '}&nbsp;
<span >
Page{' '}
{/* <strong> */}
{pageIndex + 1} of {pageOptions.length}
{/* </strong>{' '} */}
</span>
<span>
&nbsp;&nbsp;&nbsp;&nbsp;  Go to page:{' '}
<input
type="number"
defaultValue={pageIndex + 1}
onChange={e => {
const page = e.target.value ? Number(e.target.value) - 1 : 1
gotoPage(page)
}}
style={{ width: '100px' }}
/>
</span>{' '}
<select
value={pageSize}
onChange={e => {
setPageSize(Number(e.target.value))
}}
>
{[5, 10, 20, 30, 40, 50].map(pageSize => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</select>
</div>
</>
)
}

Answer 3

你应该尝试使用这些代码行，

defaultPageSize={10}
pageSizeOptions={[10,20,30,40,50]}
showPaginationBottom={true}

它将在表中仅显示 10 行，稍后您可以更改页面大小并从页面大小选项中选择一个。showPaginationBottom={true}它将有助于在表格末尾显示分页框。

希望对您有所帮助。