Merge branch 'VictorChen-fix-pagination'

Author: AllenFang

examples/js/pagination/demo.js

@@ -1,6 +1,7 @@
 /* eslint max-len: 0 */
 import React from 'react';
 import DefaultPaginationTable from './default-pagination-table';
+import IconPaginationTable from './icon-pagination-table';
 import CustomPaginationTable from './custom-pagination-table';
 import PaginationHookTable from './pagination-hook-table';
 
@@ -17,6 +18,15 @@ class Demo extends React.Component {
             </div>
           </div>
         </div>
+        <div className='col-md-offset-1 col-md-8'>
+          <div className='panel panel-default'>
+            <div className='panel-heading'>Icon Pagination Example</div>
+            <div className='panel-body'>
+              <h5>Source in /examples/js/pagination/icon-pagination-table.js</h5>
+              <IconPaginationTable />
+            </div>
+          </div>
+        </div>
         <div className='col-md-offset-1 col-md-8'>
           <div className='panel panel-default'>
             <div className='panel-heading'>Custom Pagination Example</div>

examples/js/pagination/icon-pagination-table.js

@@ -0,0 +1,48 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+
+const products = [];
+
+function addProducts(quantity) {
+  const startId = products.length;
+  for (let i = 0; i < quantity; i++) {
+    const id = startId + i;
+    products.push({
+      id: id,
+      name: 'Item name ' + id,
+      price: 2100 + i
+    });
+  }
+}
+
+addProducts(70);
+
+export default class IconPaginationTable extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const tableOptions = {
+      prePage: <i className='glyphicon glyphicon-chevron-left' />,
+      nextPage: <i className='glyphicon glyphicon-chevron-right' />,
+      firstPage: <i className='glyphicon glyphicon-step-backward' />,
+      lastPage: <i className='glyphicon glyphicon-step-forward' />
+    };
+
+    return (
+      <div>
+        <BootstrapTable
+          data={ products }
+          options={ tableOptions }
+          pagination>
+          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+        </BootstrapTable>
+      </div>
+    );
+  }
+}

src/pagination/PageButton.js

@@ -10,7 +10,7 @@ class PageButton extends Component {
 
   pageBtnClick = e => {
     e.preventDefault();
-    this.props.changePage(e.currentTarget.textContent);
+    this.props.changePage(this.props.pageNumber);
   }
 
   render() {
@@ -33,7 +33,8 @@ PageButton.propTypes = {
   active: PropTypes.bool,
   disable: PropTypes.bool,
   hidden: PropTypes.bool,
-  children: PropTypes.node
+  children: PropTypes.node,
+  pageNumber: PropTypes.number
 };
 
 export default PageButton;

src/pagination/PaginationList.js

@@ -245,23 +245,29 @@ class PaginationList extends Component {
           true :
           false;
         let title = page + '';
+        let pageNumber = page;
 
         if (page === this.props.nextPage) {
           title = this.props.nextPageTitle;
+          pageNumber = this.props.currPage + 1;
         } else if (page === this.props.prePage) {
           title = this.props.prePageTitle;
+          pageNumber = this.props.currPage - 1;
         } else if (page === this.props.firstPage) {
           title = this.props.firstPageTitle;
+          pageNumber = this.props.pageStartIndex;
         } else if (page === this.props.lastPage) {
           title = this.props.lastPageTitle;
+          pageNumber = this.getLastPage();
         }
 
         return (
           <PageButton key={ index }
             title={ title }
             changePage={ this.changePage }
             active={ isActive }
-            disable={ isDisabled }>
+            disable={ isDisabled }
+            pageNumber={ pageNumber }>
             { page }
           </PageButton>
         );