implement remote pagination

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);