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
AllenFang · Apr 23, 2016 · 8c6393b · 8c6393b
1 parent c81dd7e
commit 8c6393b
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,14 +58,18 @@ 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 } }>
         {
           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,18 +82,23 @@ 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 }>
                   { pageBtns }
                 </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,