第一页后的分页表的连续索引

Question

我有一个像这样的分页表：

但是如您所见，索引从第二页上的0开始;它应该继续11。

这是代码;

const tableDevices = this.state.pageOfDevices.map((device, index) => {
        return <TableRow key={device.id} selected={this.isSelected(index)}>
          <TableRowColumn>{index+1}</TableRowColumn>
          <TableRowColumn>{device.id}</TableRowColumn>
          <TableRowColumn>{device.description}</TableRowColumn>
        </TableRow>
    });

那么如何实现跟踪所有项目的索引而不是从另一页的0开始呢？

Answer 1

如果您知道自己所在的页面以及每页显示的项目数量，则可以轻松调整索引。

下面我假设了变量currentPage和itemsPerPage。假设currentPage从0开始。

const tableDevices = this.state.pageOfDevices.map((device, index) => {
  return <TableRow key={device.id} selected={this.isSelected(index)}>
      <TableRowColumn>{(currentPage*itemsPerPage) + index+1}</TableRowColumn>
      <TableRowColumn>{device.id}</TableRowColumn>
      <TableRowColumn>{device.description}</TableRowColumn>
    </TableRow>
});

因此，假设您每页显示10个项目，您的索引将是：

• 首页：(currentPage*itemsPerPage) + index+1 = (0*10) + index+1 = index+1。
• 第二页：(currentPage*itemsPerPage) + index+1 = (1*10) + index+1 = 10 + index+1。
• 第三页：(currentPage*itemsPerPage) + index+1 = (2*10) + index+1 = 20 + index+1。

......等等。

如果以某种方式修改pageOfDevices中的数据以包含真实索引，它可能会更好。因为那时你可以这样做：

const tableDevices = this.state.pageOfDevices.map((device, index) => {
  return <TableRow key={device.id} selected={this.isSelected(index)}>
      <TableRowColumn>{device.index}</TableRowColumn>
      <TableRowColumn>{device.id}</TableRowColumn>
      <TableRowColumn>{device.description}</TableRowColumn>
    </TableRow>
});