diff --git a/packages/react-bootstrap-table2-paginator/src/wrapper.js b/packages/react-bootstrap-table2-paginator/src/wrapper.js index fcc6cb7..0adc3c9 100644 --- a/packages/react-bootstrap-table2-paginator/src/wrapper.js +++ b/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, 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); diff --git a/packages/react-bootstrap-table2/src/store/base.js b/packages/react-bootstrap-table2/src/store/base.js index e9ac9f5..d3b6a30 100644 --- a/packages/react-bootstrap-table2/src/store/base.js +++ b/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; } diff --git a/packages/react-bootstrap-table2/src/table-factory.js b/packages/react-bootstrap-table2/src/table-factory.js index 9936b15..7ebfbd7 100644 --- a/packages/react-bootstrap-table2/src/table-factory.js +++ b/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);