diff options
| -rw-r--r-- | src/modules/dashboard/dashboard.container.js | 6 | ||||
| -rw-r--r-- | src/shared/paginator.component.js | 50 |
2 files changed, 56 insertions, 0 deletions
diff --git a/src/modules/dashboard/dashboard.container.js b/src/modules/dashboard/dashboard.container.js index f792c20..b8ee027 100644 --- a/src/modules/dashboard/dashboard.container.js +++ b/src/modules/dashboard/dashboard.container.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import { connect } from "react-redux"; import WithHeaderFooter from '../../shared/header_footer.hoc'; import WithSidebar from '../../shared/sidebar.hoc'; +import Paginator from '../../shared/paginator.component'; class DashBoardContainer extends Component { render() { @@ -11,6 +12,11 @@ class DashBoardContainer extends Component { <div className="col-md-12"> Dashboard </div> + <div className="col-md-12"> + <Paginator + totalRecords={30} + /> + </div> </div> </div> ); diff --git a/src/shared/paginator.component.js b/src/shared/paginator.component.js new file mode 100644 index 0000000..9512d4e --- /dev/null +++ b/src/shared/paginator.component.js @@ -0,0 +1,50 @@ +import React from 'react'; +import _ from 'lodash'; + +const Paginator = (props) => { + + let {totalRecords=0, currentPage=1, pageSize=15} = props; + let pages = [1]; + let previousItemStyle = totalRecords<pageSize ? 'page-item disabled' : 'page-item'; + let nextItemStyle = totalRecords<pageSize ? 'page-item disabled' : 'page-item'; + + if(totalRecords>pageSize){ + pages = _.times(parseInt(totalRecords/pageSize,10)); + } + + const onPrevious = ()=>{ + props.previousPage(); + } + + const onNext = ()=>{ + props.nextPage(); + } + + const onPageClick = (pageNum)=>{ + props.goToNextPage(pageNum) + } + + + return ( + <nav> + <ul className="pagination"> + <li className={previousItemStyle}> + <a className="page-link" href="javascript:void(0)" onClick={onPrevious}>Previous</a> + </li> + + {pages.map(_page=>{ + return( + <li key={_page} className={_page==currentPage ? "page-item active" : "page-item"}> + <a className="page-link" href="javascript:void(0)" onClick={onPageClick.bind(this, _page)}>{_page}</a> + </li> + ) + })} + <li className={nextItemStyle}> + <a className="page-link" href="#" onClick={onNext}>Next</a> + </li> + </ul> + </nav> + ) +} + +export default Paginator; |