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

【问题标题】：Continuing index of paginated table after first page第一页后分页表的连续索引
【发布时间】：2017-11-24 12:47:35
【问题描述】：

我有一个这样的分页表：

但是如你所见，索引从第二页的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开始呢？

【问题讨论】：

标签： javascript reactjs pagination

【解决方案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>
});

【讨论】：