Remote alternative pagination to fix back button bug

I am trying this since yesterday, I have read issue 1093, but I cannot yet fix the pagination without something breaking.

The main goal is to be able to click something from within the table that gets you to another page, and when going back we want to be redirected to the correct page of the table we were before.

I’ll post here what I’ve tried but if anyone has made it work please post some help 😃

The most correct-looking code I’ve tried is the one I post here, and has the following bugs:

• when changing the sizePerPage pages are being added in a wrong way in pagination
• when changing the sizePerPage number of rows shown remain the same
• clicking on a page or a next/last/etc label in the pagination resets table to its initial looks which only 1 page shown

EDIT: Images show it clearer:

Starting with correct state:

Clicking ‘50’ as the number displayed doesn’t change the data displayed but assumes we have 50 rows of data:

Clicking a number from pagination panel changes correctly displayed data but with this result:

Should the complete set of data we pass to the table change according to the pagination or not? I would expect that we always provide the complete data and that we don’t have to handle the splitting of the data to pages ourselves, but even if we do so, then 1. please explain in documentation 2. separate somehow data displayed per page and the complete set of data provided 3. it seems that the issues lies there, on the modification of the data provided to the table, since clicking to the pagination panel or the sizePerPage panel seems to be modifying the total amount of data shown. The totalDataSize remains correct but the data displayed each time is exactly the number clicked on the sizePerPage dropdown.

Extra note: if I set remote={true}, then bug is same as issue 872, and when changing sizePerPage data appear correct but pagination is still frozen to showing same number of pages and active only the first.

Code:

      <BootstrapTable 
        data={runs} 
        options={options} 
        pagination 
        remote={remote} 
        hover 
        fetchInfo={{dataTotalSize: totalDataSize}} //no documentation says why this is important or necessary
        trClassName={'clickable'}>
          // TableHeaderColumns here with filtering and sorting that i don't want to do remotely
      </BootstrapTable>

remote is:

const remote = (remoteObj) => {
  remoteObj.paging = true;
  return remoteObj;
}

options are:

tableOptions = {,
    page: this.state.currentPage,
    sizePerPage: this.state.sizePerPage,
    sizePerPageList: [30, 50, 100],
    prePage: 'Prev',
    nextPage: 'Next',
    firstPage: 'First',
    lastPage: 'Last',
    paginationShowsTotal: this.renderPaginationShowsTotal,
    onPageChange: this.handlePageChange,
    onSizePerPageList: this.handleSizePerPageList
  };

  handlePageChange = (page, sizePerPage) => {
    const currentIndex = (page - 1) * sizePerPage;
    this.setState({
      runs: this.props.runs.slice(currentIndex, currentIndex + sizePerPage),
      currentPage: page
    });
  };

  handleSizePerPageList = (sizePerPage) => {
    const currentIndex = (this.state.currentPage - 1) * sizePerPage;
    this.setState({
      runs: this.props.runs.slice(currentIndex, currentIndex + sizePerPage),
      sizePerPage: sizePerPage
    });
  };

Any help is very much appreciated.

---

PS: Extra tip: please include somewhere in the documentation all the different properties for the alternative remote, I had to try both paging and pagination and filter and filtering etc to figure out whice ones work…

[AllenFang]

@eyerean remoteObj.pagination = true,

sorry this I seems like doesn’t write a good document on here, I’ll patch later.

Anyway, thanks your help.

[AllenFang]

@eyerean, thanks your sharing, please let me know if you have any question