implement remote pagination

Author: AllenFang

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

@@ -17,17 +17,46 @@ const wrapperFactory = baseElement =>
  this.handleChangePage = this.handleChangePage.bind(this);
  this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
 
+ let currPage;
+ let currSizePerPage;
  const options = props.pagination.options || {};
- const currPage = options.pageStartIndex || Const.PAGE_START_INDEX;
  const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
- const currSizePerPage = typeof sizePerPageList[0] === 'object' ? sizePerPageList[0].value : sizePerPageList[0];
+
+ // initialize current page
+ if (typeof options.page !== 'undefined') {
+ currPage = options.page;
+ } else if (typeof options.pageStartIndex !== 'undefined') {
+ currPage = options.pageStartIndex;
+ } else {
+ currPage = Const.PAGE_START_INDEX;
+ }
+
+ // initialize current sizePerPage
+ if (typeof options.sizePerPage !== 'undefined') {
+ currSizePerPage = options.sizePerPage;
+ } else if (typeof sizePerPageList[0] === 'object') {
+ currSizePerPage = sizePerPageList[0].value;
+ } else {
+ currSizePerPage = sizePerPageList[0];
+ }
+
  this.state = { currPage, currSizePerPage };
  }
 
+ isRemote() {
+ const { remote } = this.props;
+ return remote === true || (typeof remote === 'object' && remote.pagination);
+ }
+
  handleChangePage(currPage) {
- const { pagination: { options } } = this.props;
+ const { currSizePerPage } = this.state;
+ const { pagination: { options }, onRemotePageChange } = this.props;
  if (options.onPageChange) {
- options.onPageChange(currPage, this.state.currSizePerPage);
+ options.onPageChange(currPage, currSizePerPage);
+ }
+ if (this.isRemote()) {
+ onRemotePageChange(currPage, currSizePerPage);
+ return;
  }
  this.setState(() => {
  return {
@@ -37,10 +66,14 @@ const wrapperFactory = baseElement =>
  }
 
  handleChangeSizePerPage(currSizePerPage, currPage) {
- const { pagination: { options } } = this.props;
+ const { pagination: { options }, onRemotePageChange } = this.props;
  if (options.onSizePerPageChange) {
  options.onSizePerPageChange(currSizePerPage, currPage);
  }
+ if (this.isRemote()) {
+ onRemotePageChange(currPage, currSizePerPage);
+ return;
+ }
  this.setState(() => {
  return {
  currPage,
@@ -60,25 +93,31 @@ const wrapperFactory = baseElement =>
  Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
  const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
  Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
+ const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
+ Const.PAGE_START_INDEX : options.pageStartIndex;
+
+ const data = this.isRemote() ?
+ this.props.data :
+ store.getByCurrPage(currPage, currSizePerPage, pageStartIndex);
 
  const base = baseElement({
  ...this.props,
  key: 'table',
- data: store.getByCurrPage(currPage, currSizePerPage)
+ data
  });
 
  return [
  base,
  <Pagination
  key="pagination"
- dataSize={ this.props.store.getDataSize() }
+ dataSize={ options.totalSize || store.getDataSize() }
  currPage={ currPage }
  currSizePerPage={ currSizePerPage }
  onPageChange={ this.handleChangePage }
  onSizePerPageChange={ this.handleChangeSizePerPage }
  sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
  paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
- pageStartIndex={ options.pageStartIndex || Const.PAGE_START_INDEX }
+ pageStartIndex={ pageStartIndex }
  withFirstAndLast={ withFirstAndLast }
  alwaysShowAllBtns={ alwaysShowAllBtns }
  hideSizePerPage={ hideSizePerPage }

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -100,6 +100,9 @@ BootstrapTable.propTypes = {
  keyField: PropTypes.string.isRequired,
  data: PropTypes.array.isRequired,
  columns: PropTypes.array.isRequired,
+ remote: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+ pagination: PropTypes.bool
+ })]),
  store: PropTypes.object,
  noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  striped: PropTypes.bool,
@@ -153,10 +156,12 @@ BootstrapTable.propTypes = {
  defaultSorted: PropTypes.arrayOf(PropTypes.shape({
  dataField: PropTypes.string.isRequired,
  order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
- }))
+ })),
+ onTableChange: PropTypes.func
 };
 
 BootstrapTable.defaultProps = {
+ remote: false,
  striped: false,
  bordered: true,
  hover: false,

packages/react-bootstrap-table2/src/container.js

@@ -18,12 +18,18 @@ const withDataStore = Base =>
  super(props);
  this.store = new Store(props);
  this.handleUpdateCell = this.handleUpdateCell.bind(this);
+ this.onRemotePageChange = this.onRemotePageChange.bind(this);
  }
 
  componentWillReceiveProps(nextProps) {
  this.store.set(nextProps.data);
  }
 
+ onRemotePageChange(page, sizePerPage) {
+ const newState = { page, sizePerPage };
+ this.props.onTableChange(newState);
+ }
+
  handleUpdateCell(rowId, dataField, newValue) {
  const { cellEdit } = this.props;
  // handle cell editing internal
@@ -66,7 +72,10 @@ const withDataStore = Base =>
  } else if (this.props.columns.filter(col => col.sort).length > 0) {
  return wrapWithSort(baseProps);
  } else if (this.props.pagination) {
- return wrapWithPagination(baseProps);
+ return wrapWithPagination({
+ ...baseProps,
+ onRemotePageChange: this.onRemotePageChange
+ });
  }
 
  return React.createElement(Base, baseProps);

packages/react-bootstrap-table2/src/store/base.js

@@ -40,14 +40,19 @@ export default class Store {
  return this.data;
  }
 
- getByCurrPage(page, sizePerPage) {
- const end = (page * sizePerPage) - 1;
+ getByCurrPage(page, sizePerPage, pageStartIndex) {
+ const getNormalizedPage = () => {
+ const offset = Math.abs(1 - pageStartIndex);
+ return page + offset;
+ };
+ const end = (getNormalizedPage() * sizePerPage) - 1;
  const start = end - (sizePerPage - 1);
+ const dataSize = this.getDataSize();
 
  const result = [];
  for (let i = start; i <= end; i += 1) {
  result.push(this.data[i]);
- if (i + 1 === this.getDataSize()) break;
+ if (i + 1 === dataSize) break;
  }
  return result;
  }

packages/react-bootstrap-table2/src/table-factory.js

@@ -20,13 +20,9 @@ export const pureTable = props =>
  React.createElement(BootstrapTable, { ...props });
 
 export const wrapWithPagination = (props) => {
- if (props.pagination) {
- const { wrapper } = props.pagination;
- const PaginationBase = wrapper(pureTable);
- return React.createElement(PaginationBase, { ...props });
- }
-
- return pureTable(props);
+ const { wrapper } = props.pagination;
+ const PaginationBase = wrapper(pureTable);
+ return React.createElement(PaginationBase, { ...props });
 };
 export const paginationElement = props => pureTable(props);