Dual callbacks on pagePerSize dropdown change

[prajapati-parth]

Hello @AllenFang

For some weird reason I'm doing a fetch request on onPageChange and sizePerPageListChange both.

I've encountered a scenario where sizePerPageListChange event also triggers onPageChange event. This is very similar to the example here(section: Pagination Hook)

Can we avoid the table doing multiple events like these?

Thanks.

[prajapati-parth]

Also I found a serve mismatch as when changing page size from dropdown, onPageChange event is fired before onSizePerPageList.

[AllenFang]

HI @prajapati-parth

Because sizePerPage change may also change the page due to the number of total page will be recalculate after sizePerPage changed, for example,

if you are in last page(10) with sizePerPage 10, if you change sizePerPage to 80, now, the page 10 is not existing. so react-bootstrap-talbe will auto redirect the page to page 2. so that there's a page change event here.

But it's a chance problems, I can avoid to call onPageChange when current page is same as before one after sizePerPage changed, but seems like you want to avoid onPageChange to being called every time even current page change after sizePerPage changed?!

Thanks !!

[prajapati-parth]

can avoid to call onPageChange when current page is same as before one after sizePerPage changed

I've currently used the same fix.

seems like you want to avoid onPageChange to being called every time even current page change after sizePerPage changed

Yes, that's what I require. But I'm unsure what's the correct way.

[AllenFang]

I think I can avoid call onPageChange when current page is not change actually, but if we want to avoid to call onPageChange every time after onSizePerPageList, I think it will have some trouble for the other people.

And also I'll investigate if we can call the onSizePerPageList firstly then call onPageChange.

Feel free to let me know if you have any idea or concern, thanks 👍

[prajapati-parth]

Sure @AllenFang. Thanks for taking quick action.
Here's the code snippet how I fixed it. If it can be of some help to you.

const onPageChange = () => {
    // If previous page size and the new page size are equal, page change is actual, otherwise it is triggred by sizePerPage dropdown change
    // This is a fix. An issue in the original repo has been created here: https://github.com/AllenFang/react-bootstrap-table/issues/1587
    let oldPageSize = this.refs['BootstrapTable'].getSizePerPage(),
    isActualPageChange = oldPageSize == sizePerPage

    if (isActualPageChange) {
        // onPageChange code
    }
}

[AllenFang]

Nice, thanks for sharing 👍

[minkesh]

Hey @AllenFang any updates on this.