From 8c6393b93bfb6ca814d5f650a4160734cc429369 Mon Sep 17 00:00:00 2001
From: Jean-Francois Remy <jeff@melix.org>
Date: Fri, 22 Apr 2016 17:32:25 -0700
Subject: [PATCH 1/2] When pagination is enabled, allow to display the position
 within the table + total Also useful when filtering is enabled to know how
 many items match our filter

---
 examples/js/complex/app.js                    |  1 +
 .../js/pagination/custom-pagination-table.js  |  3 ++-
 src/BootstrapTable.js                         |  3 +++
 src/pagination/PaginationList.js              | 24 +++++++++++++------
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/examples/js/complex/app.js b/examples/js/complex/app.js
index 231795e99..c8519c3aa 100644
--- a/examples/js/complex/app.js
+++ b/examples/js/complex/app.js
@@ -72,6 +72,7 @@ const cellEditProp = {
 };
 
 const options = {
+  paginationShowsTotal: true,
   sortName: 'name',  // default sort column name
   sortOrder: 'desc',  // default sort order
   afterTableComplete: onAfterTableComplete, // A hook for after table render complete.
diff --git a/examples/js/pagination/custom-pagination-table.js b/examples/js/pagination/custom-pagination-table.js
index 68930ad0f..835a687dc 100644
--- a/examples/js/pagination/custom-pagination-table.js
+++ b/examples/js/pagination/custom-pagination-table.js
@@ -29,7 +29,8 @@ export default class CustomPaginationTable extends React.Component {
       prePage: 'Prev', // Previous page button text
       nextPage: 'Next', // Next page button text
       firstPage: 'First', // First page button text
-      lastPage: 'Last' // Last page button text
+      lastPage: 'Last', // Last page button text
+      paginationShowsTotal: true
     };
 
     return (
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
index 5dcd98385..014956d34 100644
--- a/src/BootstrapTable.js
+++ b/src/BootstrapTable.js
@@ -599,6 +599,7 @@ class BootstrapTable extends Component {
             changePage={ this.handlePaginationData }
             sizePerPage={ this.state.sizePerPage }
             sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
+            paginationShowsTotal={ options.paginationShowsTotal }
             paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
             remote={ this.isRemoteDataSource() }
             dataSize={ dataSize }
@@ -806,6 +807,7 @@ BootstrapTable.propTypes = {
     afterColumnFilter: PropTypes.func,
     onRowClick: PropTypes.func,
     page: PropTypes.number,
+    paginationShowsTotal: PropTypes.bool,
     sizePerPageList: PropTypes.array,
     sizePerPage: PropTypes.number,
     paginationSize: PropTypes.number,
@@ -878,6 +880,7 @@ BootstrapTable.defaultProps = {
     onRowMouseOut: undefined,
     onRowMouseOver: undefined,
     page: undefined,
+    paginationShowsTotal: false,
     sizePerPageList: Const.SIZE_PER_PAGE_LIST,
     sizePerPage: undefined,
     paginationSize: Const.PAGINATION_SIZE,
diff --git a/src/pagination/PaginationList.js b/src/pagination/PaginationList.js
index 9f930cf57..e66fb7dca 100644
--- a/src/pagination/PaginationList.js
+++ b/src/pagination/PaginationList.js
@@ -40,7 +40,7 @@ class PaginationList extends Component {
   }
 
   render() {
-    const { dataSize, sizePerPage, sizePerPageList } = this.props;
+    const { currPage, dataSize, sizePerPage, sizePerPageList, paginationShowsTotal } = this.props;
     this.totalPages = Math.ceil(dataSize / sizePerPage);
     const pageBtns = this.makePage();
     const pageListStyle = {
@@ -58,6 +58,9 @@ class PaginationList extends Component {
         </li>
       );
     });
+    const total = paginationShowsTotal ? <span>
+      Showing rows { (currPage - 1) * sizePerPage + 1 } to { Math.min(currPage * sizePerPage, dataSize) } of { dataSize }
+    </span> : null;
 
     return (
       <div className='row' style={ { marginTop: 15 } }>
@@ -65,7 +68,8 @@ class PaginationList extends Component {
           sizePerPageList.length > 1
           ? <div>
               <div className='col-md-6'>
-                <div className='dropdown'>
+                { total }{ ' ' }
+                <span className='dropdown'>
                   <button className='btn btn-default dropdown-toggle'
                     type='button' id='pageDropDown' data-toggle='dropdown'
                     aria-expanded='true'>
@@ -78,7 +82,7 @@ class PaginationList extends Component {
                   <ul className='dropdown-menu' role='menu' aria-labelledby='pageDropDown'>
                     { sizePerPageOptions }
                   </ul>
-                </div>
+                </span>
               </div>
               <div className='col-md-6'>
                 <ul className='pagination' style={ pageListStyle }>
@@ -86,10 +90,15 @@ class PaginationList extends Component {
                 </ul>
               </div>
             </div>
-          : <div className='col-md-12'>
-              <ul className='pagination' style={ pageListStyle }>
-                { pageBtns }
-              </ul>
+          : <div>
+              <div className='col-md-6'>
+                { total }
+              </div>
+              <div className='col-md-6'>
+                <ul className='pagination' style={ pageListStyle }>
+                  { pageBtns }
+                </ul>
+              </div>
             </div>
         }
       </div>
@@ -164,6 +173,7 @@ PaginationList.propTypes = {
   dataSize: PropTypes.number,
   changePage: PropTypes.func,
   sizePerPageList: PropTypes.array,
+  paginationShowsTotal: PropTypes.bool,
   paginationSize: PropTypes.number,
   remote: PropTypes.bool,
   onSizePerPageList: PropTypes.func,

From a4e662b791c4fd28cef587b1f3f740de28fb0432 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sat, 23 Apr 2016 19:33:01 +0800
Subject: [PATCH 2/2] fix max length warning

---
 src/pagination/PaginationList.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pagination/PaginationList.js b/src/pagination/PaginationList.js
index e66fb7dca..e681d1566 100644
--- a/src/pagination/PaginationList.js
+++ b/src/pagination/PaginationList.js
@@ -59,7 +59,9 @@ class PaginationList extends Component {
       );
     });
     const total = paginationShowsTotal ? <span>
-      Showing rows { (currPage - 1) * sizePerPage + 1 } to { Math.min(currPage * sizePerPage, dataSize) } of { dataSize }
+      Showing rows { (currPage - 1) * sizePerPage + 1 } to&nbsp;
+      { Math.min(currPage * sizePerPage, dataSize) } of&nbsp;
+      { dataSize }
     </span> : null;
 
     return (