Posted By

LanaS on 04/14/16


Tagged

pagination paginator Development React Reactjs


Versions (?)

React: How to Create a Simple but Elegant Paginator


 / Published in: JavaScript
 

URL: http://xbsoftware.com/react-js-development/

This simple code can be used to create a simple but elegant paginator using React js. It can also help you define the number of articles you'd like to display on a page.

  1. class Paginator extends Component {
  2. static propTypes = {
  3. total: PropTypes.number,
  4. perPage: PropTypes.number,
  5. createLink: PropTypes.func
  6. }
  7.  
  8. render () {
  9. return (
  10. <div>
  11. {[...Array(this.getCountPages())].map((item, index) =>
  12. <Link to={this.getLink(index + 1)} key={index} activeClassName = "active">
  13. <button>{index + 1}</button>
  14. </Link>)}
  15. </div>
  16. )
  17. }
  18.  
  19. getLink(pageNo) {
  20. return this.props.createLink(pageNo)
  21. }
  22.  
  23. getCountPages() {
  24. const {total, perPage} = this.props
  25. return Math.floor(total/perPage) + (total%perPage > 0 ? 1 : 0)
  26. }
  27. }
  28.  
  29. const createLink = (pageNo) => `page/${pageNo}`
  30. ReactDOM.render( <Paginator total={17} perPage={5} createLink = {createLink} />,

Report this snippet  

You need to login to post a comment.