Remove comment + Fix paging issues in demo + fix a bug in BootstrapTa…

…ble.js:

handlePaginationData was not bind to this in the changePage props of PaginationList.
As a consequence, this in the handlePaginationData was the PaginationList element and not the BootstrapTable.
When state was updating there, only the render of the PaginationList was executed and not the render of the BootstrapTable (which eventually renders the PaginationList).
This seems to work because state properties updated during execution of handlePaginationData (currPage, sizePerPage) have the same name as the properties of the PaginationList.

examples/js/remote/remote-paging.js

@@ -13,6 +13,7 @@ export default class RemotePaging extends React.Component {
                       options={ { sizePerPage: this.props.sizePerPage,
                                   onPageChange: this.props.onPageChange,
                                   sizePerPageList: [ 5, 10 ],
+                                  page: this.props.currentPage,
                                   onSizePerPageList: this.props.onSizePerPageList } }>
         <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
         <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>

examples/js/remote/remote-store-all.js

@@ -256,7 +256,11 @@ export default class RemoteStoreSorting extends React.Component {
   onSizePerPageList(sizePerPage) {
     const products = this.getCurrentData();
 
-    const currentIndex = (this.state.currentPage - 1) * sizePerPage;
+    let currentIndex = (this.state.currentPage - 1) * sizePerPage;
+    if (currentIndex > products.length - 1) {
+      const lastPage = Math.ceil(products.length / sizePerPage);
+      currentIndex = (lastPage - 1) * sizePerPage;
+    }
     this.setState({
       data: products.slice(currentIndex, currentIndex + sizePerPage),
       sizePerPage: sizePerPage

examples/js/remote/remote-store-paging.js

@@ -19,24 +19,24 @@ export default class RemoteStorePaging extends React.Component {
   constructor(props) {
     super(props);
     this.products = getProducts();
-    this.currentPage = 1;
     this.state = {
       data: this.products.slice(0, this.props.sizePerPage),
       totalDataSize: this.products.length,
-      sizePerPage: this.props.sizePerPage
+      sizePerPage: this.props.sizePerPage,
+      currentPage: 1
     };
   }
 
   onPageChange(page, sizePerPage) {
     const currentIndex = (page - 1) * sizePerPage;
-    this.currentPage = page;
     this.setState({
-      data: this.products.slice(currentIndex, currentIndex + sizePerPage)
+      data: this.products.slice(currentIndex, currentIndex + sizePerPage),
+      currentPage: page
     });
   }
 
   onSizePerPageList(sizePerPage) {
-    const currentIndex = (this.currentPage - 1) * sizePerPage;
+    const currentIndex = (this.state.currentPage - 1) * sizePerPage;
     this.setState({
       data: this.products.slice(currentIndex, currentIndex + sizePerPage),
       sizePerPage: sizePerPage

src/BootstrapTable.js

@@ -136,13 +136,14 @@ class BootstrapTable extends Component {
     const { options, selectRow } = nextProps;
 
     this.store.setData(nextProps.data.slice());
+    let page = options.page || this.state.currPage;
 
     if (this.isRemoteDataSource()) {
       this.setState({
-        data: nextProps.data.slice()
+        data: nextProps.data.slice(),
+        currPage: page
       });
     } else {
-      let page = options.page || this.state.currPage;
       const sizePerPage = options.sizePerPage || this.state.sizePerPage;
 
       // #125
@@ -666,7 +667,7 @@ class BootstrapTable extends Component {
           <PaginationList
             ref='pagination'
             currPage={ this.state.currPage }
-            changePage={ this.handlePaginationData }
+            changePage={ this.handlePaginationData.bind(this) }
             sizePerPage={ this.state.sizePerPage }
             sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
             paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }

src/store/TableDataStore.js

@@ -177,13 +177,6 @@ export class TableDataStore {
   }
 
   remove(rowKey) {
-    if (this.remote) {
-      /* this.data = this.data.filter(function(row) {
-        return rowKey.indexOf(row[this.keyField]) == -1;
-      }, this); */
-      return;
-    }
-
     const currentDisplayData = this.getCurrentDisplayData();
     const result = currentDisplayData.filter(row => {
       return rowKey.indexOf(row[this.keyField]) === -1;