如何在单击下一步按钮时通过 API 调用在 ReactTable 中添加分页

Question

我想在 ReactTable 中添加带有上一个和下一个按钮的分页，默认情况下显示 10 行。我不确定数据库中是否有超过 10 行。

我想首先显示前 10 行，然后单击下一个按钮，应调用 API，该 API 将获取其他 10 行（如果存在）。

这是 ReactTable：

< ReactTable
columns = {
  [{
      Header: "Id",
      accessor: "id"
    },
    {
      Header: "Name",
      id: "name"
    }
  ]
}
manual
data = {
  data
}
pages = {
  pages
} < -- -- -- -- - I don 't know the total number of pages
loading = {
  loading
}
onFetchData = {
  () => this.fetchData()
}
/>

这里的问题是我不知道数据库中存在的总行数，因此我可以将其传递给页面。在不知道总页数的情况下如何做到这一点，如果有任何行，只需单击“下一步”按钮，就会显示出来。

Answer 1

你需要从你的数据库中获取元素的总数

const DEFAULTPAGESIZE= 30
const total //from your bd
pagination={{
          defaultPageSize: DEFAULTPAGESIZE,
          total,
          onChange: page => {
            doChange(
              DEFAULTPAGESIZE,
              page * DEFAULTPAGESIZE - DEFAULTPAGESIZE
            )
          },
        }}

预付款应该是这样的：

doChange(limit, skip)
doChange(DEFAULTPAGESIZE, 1,2...n * DEFAULTPAGESIZE - DEFAULTPAGESIZE )

数学是：

1x30-30=0
2x30-30=30
3x30-30=60