aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/modules/dashboard/dashboard.container.js6
-rw-r--r--src/shared/paginator.component.js50
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;