CODEWITHSUNDEEP
javascriptreactjspagination
Burak ULU
Burak ULU

Reputation: 303

Continuing index of paginated table after first page

I have a paginated table like this:

enter image description here

enter image description here

But as you see, the index starts from 0 on the second page; it should continue continue at 11.

Here's the code;

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>
    });

So how can I achieve to track the index of all items rather than starting from 0 on the other page?

Upvotes: 2

Views: 1334

Answers (1)

Chris
Chris

Reputation: 59501

If you know what page you are on and how many items are displayed per page, you can easily adjust the index.

Below I have assumed the variables currentPage and itemsPerPage. Assume that currentPage starts from 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>
});

So assuming you display 10 items per page, your indexing would be:

  • First page: (currentPage*itemsPerPage) + index+1 = (0*10) + index+1 = index+1.
  • Second page: (currentPage*itemsPerPage) + index+1 = (1*10) + index+1 = 10 + index+1.
  • Third page: (currentPage*itemsPerPage) + index+1 = (2*10) + index+1 = 20 + index+1.

...and so on.

Though it's probably better if you somehow modify the data in pageOfDevices to include a true index. Because then you could do:

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>
});

Upvotes: 2

Related Questions