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 { ); }); + const total = paginationShowsTotal ? + Showing rows { (currPage - 1) * sizePerPage + 1 } to { Math.min(currPage * sizePerPage, dataSize) } of { dataSize } + : null; return (
@@ -65,7 +68,8 @@ class PaginationList extends Component { sizePerPageList.length > 1 ?
-
+ { total }{ ' ' } +
+
    @@ -86,10 +90,15 @@ class PaginationList extends Component {
- :
- + :
+
+ { total } +
+
+
    + { pageBtns } +
+
}
@@ -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,