Skip to content

Instantly share code, notes, and snippets.

@FirstWhack
Created Sep 6, 2016
Embed
What would you like to do?
var React = require('react'),
{ ButtonGroup, Button } = require('react-bootstrap'),
ResultPaging = React.createClass({
displayName: 'ResultPaging',
propTypes: {
page: React.PropTypes.number,
pageSize: React.PropTypes.number,
totalCount: React.PropTypes.number,
changePage: React.PropTypes.func
},
getDefaultProps: function() {
return {
page: 1,
pageSize: 10,
totalCount: 1
};
},
handleClick: function(value, e) {
e.preventDefault();
if (value !== this.props.page) {
this.props.changePage(value);
}
},
render: function() {
var totalPages = Math.ceil(this.props.totalCount / this.props.pageSize),
pages = [],
minPageRange = Math.max(this.props.page - 3, 1),
maxPageRange = Math.min(minPageRange + 6, totalPages),
diff = maxPageRange - minPageRange;
// make sure we always show at least 7 pages.
if (diff > 0 && diff < 6 && minPageRange > diff && totalPages > 6) {
minPageRange -= (6 - diff);
} else if (totalPages <= 6) {
minPageRange = 1;
maxPageRange = totalPages;
}
// go back
pages.push(<Button
key={0}
onClick={this.handleClick.bind(this, 1)}
disabled={(this.props.page - 1) <= 0}>
<i className='fa fa-angle-double-left fa-lg' />
</Button>);
for (let i = minPageRange; i <= maxPageRange; i++) {
pages.push(<Button
key={i}
onClick={this.handleClick.bind(this, i)}
className = { (i === this.props.page) ? 'selected-button' : ''}>
{i}
</Button>);
}
// go forward
pages.push(<Button
key={totalPages + 1}
onClick={this.handleClick.bind(this, totalPages)}
disabled={this.props.page === maxPageRange}>
<i className='fa fa-angle-double-right fa-lg' />
</Button>);
return (
<ButtonGroup className='c-result-paging'>
{pages}
</ButtonGroup>
);
}
});
module.exports = ResultPaging;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment