Pagination & total

[Extazx2]

Hello,

I have trouble understanding how the pagination works.
I work with firebase and to avoid many useless reads, I want to implement custom "page change".

I have a counter (at the time of my example : 39) in my database, that i collect, telling me how many docs I have, and i go through them 20 by 20 on each page (supposedly) instead of loading the whole firebase collection and let the table do the pagination itself.

Here is my table :

Here is the screen of my react dev tools

Here is my code :

        let options = {
            totalSize: nbCandidates,
            showTotal: true,
        };
        console.log(typeof nbCandidates);
        console.log(options);
        console.log(paginationFactory(options));
        if(candidates){
            return (<BootstrapTable keyField='cid'
                                    data={candidates}
                                    columns={columns}
                                    pagination={paginationFactory({...options})}/>);
        }

The thing is : if in the options, i change totalSize: nbCandidates to totalSize: 39 I will have 4 pages in my list (which is ok, because there is 10 rows per pages, 39 rows total.

output of console.log(typeof nbCandidates); is "number"

[AllenFang]

@Extazx2 I can't understand what kind of issue you faced, would you please clearify this your question again? It will be better to put your example code to codesandbox and keep it simple and minimal so that I can reproduce your issue, thanks

I will reopen it when I can identify this issue.

[Extazx2]

Here is what is not working

        let paginationOptions = {
            totalSize: nbCandidates,
            showTotal: true,
            sizePerPage: 20,
            hideSizePerPage: true,
            //hidePageListOnlyOnePage: true
        };
        if(candidates){
            return (
                <BootstrapTable keyField='cid'
                                data={candidates}
                                columns={columns}
                                selectRow={selectRow}
                                rowEvents={rowEvents}
                                pagination={paginationFactory({...paginationOptions})}/>);
        }

where nbCandidates is a number, at the time of my problem : 39. (which, with these options, should give me 2 pages, but i only get 1 page of items.

        let paginationOptions = {
            totalSize: 40,
            showTotal: true,
            sizePerPage: 20,
            hideSizePerPage: true,
            //hidePageListOnlyOnePage: true
        };
        if(candidates){
            return (
                <BootstrapTable keyField='cid'
                                data={candidates}
                                columns={columns}
                                selectRow={selectRow}
                                rowEvents={rowEvents}
                                pagination={paginationFactory({...paginationOptions})}/>);
        }

if i put the number directly, there is no problem, i have my 2 pages.

[AllenFang]

@Extazx2 I think it's gonna be happen and I can not reproduce it. So If ok, please give me an example on codesandbox so that I can reproduce it.

BTW, in you case, actually you don't need to set the totalSize probably, you can check the doc: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationtotalsize-number

[Extazx2]

@AllenFang as my back end is connected to firebase, i'll try to open a new sample project and do a codesandbox.

[Tana00]

@Extazx2 I have this same issue. Please how did you resolve it?