Skip to content

Commit dfc0e15

Browse files
AllenFangAllenFang
authored
fix #140
Implement remote pagination
2 parents 47f86df + d43b3d6 commit dfc0e15

File tree

10 files changed

+470
-107
lines changed

10 files changed

+470
-107
lines changed

‎packages/react-bootstrap-table2-example/examples/pagination/remote-pagination.js‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/* eslint react/no-multi-comp: 0 */
2+
import React from 'react';
3+
import PropTypes from 'prop-types';
4+
import BootstrapTable from 'react-bootstrap-table2';
5+
import paginator from 'react-bootstrap-table2-paginator';
6+
import Code from 'components/common/code-block';
7+
import { productsGenerator } from 'utils/common';
8+
9+
const products = productsGenerator(87);
10+
11+
const columns = [{
12+
dataField: 'id',
13+
text: 'Product ID'
14+
}, {
15+
dataField: 'name',
16+
text: 'Product Name'
17+
}, {
18+
dataField: 'price',
19+
text: 'Product Price'
20+
}];
21+
22+
const sourceCode = `\
23+
import BootstrapTable from 'react-bootstrap-table2';
24+
import paginator from 'react-bootstrap-table2-paginator';
25+
// ...
26+
const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
27+
<div>
28+
<BootstrapTable
29+
remote
30+
keyField="id"
31+
data={ data }
32+
columns={ columns }
33+
pagination={ paginator({ page, sizePerPage, totalSize }) }
34+
onTableChange={ onTableChange }
35+
/>
36+
<Code>{ sourceCode }</Code>
37+
</div>
38+
);
39+
40+
class Container extends React.Component {
41+
constructor(props) {
42+
super(props);
43+
this.state = {
44+
page: 1,
45+
data: products.slice(0, 10),
46+
sizePerPage: 10
47+
};
48+
}
49+
50+
handleTableChange = ({ page, sizePerPage }) => {
51+
const currentIndex = (page - 1) * sizePerPage;
52+
setTimeout(() => {
53+
this.setState(() => ({
54+
page,
55+
data: products.slice(currentIndex, currentIndex + sizePerPage),
56+
sizePerPage
57+
}));
58+
}, 2000);
59+
}
60+
61+
render() {
62+
const { data, sizePerPage, page } = this.state;
63+
return (
64+
<RemotePagination
65+
data={ data }
66+
page={ page }
67+
sizePerPage={ sizePerPage }
68+
totalSize={ products.length }
69+
onTableChange={ this.handleTableChange }
70+
/>
71+
);
72+
}
73+
}
74+
`;
75+
76+
const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
77+
<div>
78+
<BootstrapTable
79+
remote
80+
keyField="id"
81+
data={ data }
82+
columns={ columns }
83+
pagination={ paginator({ page, sizePerPage, totalSize }) }
84+
onTableChange={ onTableChange }
85+
/>
86+
<Code>{ sourceCode }</Code>
87+
</div>
88+
);
89+
90+
RemotePagination.propTypes = {
91+
data: PropTypes.array.isRequired,
92+
page: PropTypes.number.isRequired,
93+
totalSize: PropTypes.number.isRequired,
94+
sizePerPage: PropTypes.number.isRequired,
95+
onTableChange: PropTypes.func.isRequired
96+
};
97+
98+
class Container extends React.Component {
99+
constructor(props) {
100+
super(props);
101+
this.state = {
102+
page: 1,
103+
data: products.slice(0, 10),
104+
sizePerPage: 10
105+
};
106+
}
107+
108+
handleTableChange = ({ page, sizePerPage }) => {
109+
const currentIndex = (page - 1) * sizePerPage;
110+
setTimeout(() => {
111+
this.setState(() => ({
112+
page,
113+
data: products.slice(currentIndex, currentIndex + sizePerPage),
114+
sizePerPage
115+
}));
116+
}, 2000);
117+
}
118+
119+
render() {
120+
const { data, sizePerPage, page } = this.state;
121+
return (
122+
<RemotePagination
123+
data={ data }
124+
page={ page }
125+
sizePerPage={ sizePerPage }
126+
totalSize={ products.length }
127+
onTableChange={ this.handleTableChange }
128+
/>
129+
);
130+
}
131+
}
132+
133+
export default Container;

‎packages/react-bootstrap-table2-example/stories/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ import HideSelectionColumnTable from 'examples/row-selection/hide-selection-colu
7272
import PaginationTable from 'examples/pagination';
7373
import PaginationHooksTable from 'examples/pagination/pagination-hooks';
7474
import CustomPaginationTable from 'examples/pagination/custom-pagination';
75+
import RemotePaginationTable from 'examples/pagination/remote-pagination';
7576

7677
// css style
7778
import 'bootstrap/dist/css/bootstrap.min.css';
@@ -153,4 +154,5 @@ storiesOf('Row Selection', module)
153154
storiesOf('Pagination', module)
154155
.add('Basic Pagination Table', () => <PaginationTable />)
155156
.add('Pagination Hooks', () => <PaginationHooksTable />)
156-
.add('Custom Pagination', () => <CustomPaginationTable />);
157+
.add('Custom Pagination', () => <CustomPaginationTable />)
158+
.add('Remote Pagination', () => <RemotePaginationTable />);

‎packages/react-bootstrap-table2-paginator/src/wrapper.js‎

Lines changed: 47 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,46 @@ const wrapperFactory = baseElement =>
1717
this.handleChangePage = this.handleChangePage.bind(this);
1818
this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
1919

20+
let currPage;
21+
let currSizePerPage;
2022
const options = props.pagination.options || {};
21-
const currPage = options.pageStartIndex || Const.PAGE_START_INDEX;
2223
const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
23-
const currSizePerPage = typeof sizePerPageList[0] === 'object' ? sizePerPageList[0].value : sizePerPageList[0];
24+
25+
// initialize current page
26+
if (typeof options.page !== 'undefined') {
27+
currPage = options.page;
28+
} else if (typeof options.pageStartIndex !== 'undefined') {
29+
currPage = options.pageStartIndex;
30+
} else {
31+
currPage = Const.PAGE_START_INDEX;
32+
}
33+
34+
// initialize current sizePerPage
35+
if (typeof options.sizePerPage !== 'undefined') {
36+
currSizePerPage = options.sizePerPage;
37+
} else if (typeof sizePerPageList[0] === 'object') {
38+
currSizePerPage = sizePerPageList[0].value;
39+
} else {
40+
currSizePerPage = sizePerPageList[0];
41+
}
42+
2443
this.state = { currPage, currSizePerPage };
2544
}
2645

46+
isRemote() {
47+
const { remote } = this.props;
48+
return remote === true || (typeof remote === 'object' && remote.pagination);
49+
}
50+
2751
handleChangePage(currPage) {
28-
const { pagination: { options } } = this.props;
52+
const { currSizePerPage } = this.state;
53+
const { pagination: { options }, onRemotePageChange } = this.props;
2954
if (options.onPageChange) {
30-
options.onPageChange(currPage, this.state.currSizePerPage);
55+
options.onPageChange(currPage, currSizePerPage);
56+
}
57+
if (this.isRemote()) {
58+
onRemotePageChange(currPage, currSizePerPage);
59+
return;
3160
}
3261
this.setState(() => {
3362
return {
@@ -37,10 +66,14 @@ const wrapperFactory = baseElement =>
3766
}
3867

3968
handleChangeSizePerPage(currSizePerPage, currPage) {
40-
const { pagination: { options } } = this.props;
69+
const { pagination: { options }, onRemotePageChange } = this.props;
4170
if (options.onSizePerPageChange) {
4271
options.onSizePerPageChange(currSizePerPage, currPage);
4372
}
73+
if (this.isRemote()) {
74+
onRemotePageChange(currPage, currSizePerPage);
75+
return;
76+
}
4477
this.setState(() => {
4578
return {
4679
currPage,
@@ -60,25 +93,31 @@ const wrapperFactory = baseElement =>
6093
Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
6194
const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
6295
Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
96+
const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
97+
Const.PAGE_START_INDEX : options.pageStartIndex;
98+
99+
const data = this.isRemote() ?
100+
this.props.data :
101+
store.getByCurrPage(currPage, currSizePerPage, pageStartIndex);
63102

64103
const base = baseElement({
65104
...this.props,
66105
key: 'table',
67-
data: store.getByCurrPage(currPage, currSizePerPage)
106+
data
68107
});
69108

70109
return [
71110
base,
72111
<Pagination
73112
key="pagination"
74-
dataSize={ this.props.store.getDataSize() }
113+
dataSize={ options.totalSize || store.getDataSize() }
75114
currPage={ currPage }
76115
currSizePerPage={ currSizePerPage }
77116
onPageChange={ this.handleChangePage }
78117
onSizePerPageChange={ this.handleChangeSizePerPage }
79118
sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
80119
paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
81-
pageStartIndex={ options.pageStartIndex || Const.PAGE_START_INDEX }
120+
pageStartIndex={ pageStartIndex }
82121
withFirstAndLast={ withFirstAndLast }
83122
alwaysShowAllBtns={ alwaysShowAllBtns }
84123
hideSizePerPage={ hideSizePerPage }

0 commit comments

Comments
 (0)