Pagination is the process of splitting the contents, or a section of contents from a website or application, into discrete pages.
Create Pagination in React
class Pagination extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
currentPage: null,
pageCount: null
}
}
componentWillMount() {
const startingPage = this.props.startingPage
? this.props.startingPage
: 1;
const data = this.props.data;
const pageSize = this.props.pageSize;
let pageCount = parseInt(data.length / pageSize);
if (data.length % pageSize > 0) {
pageCount++;
}
this.setState({
currentPage: startingPage,
pageCount: pageCount
});
}
setCurrentPage(num) {
this.setState({currentPage: num});
}
createControls() {
let controls = [];
const pageCount = this.state.pageCount;
for (let i = 1; i <= pageCount; i++) {
const baseClassName = 'pagination-controls__button';
const activeClassName = i === this.state.currentPage ? `${baseClassName}--active` : '';
controls.push(
<div
className={`${baseClassName} ${activeClassName}`}
onClick={() => this.setCurrentPage(i)}
>
{i}
</div>
);
}
return controls;
}
createPaginatedData() {
const data = this.props.data;
const pageSize = this.props.pageSize;
const currentPage = this.state.currentPage;
const upperLimit = currentPage * pageSize;
const dataSlice = data.slice((upperLimit - pageSize), upperLimit);
return dataSlice;
}
render() {
return (
<div className='pagination'>
<div className='pagination-controls'>
{this.createControls()}
</div>
<div className='pagination-results'>
{React.cloneElement(this.props.children, {data: this.createPaginatedData()})}
</div>
</div>
);
}
}
Pagination.propTypes = {
data: React.PropTypes.array.isRequired,
pageSize: React.PropTypes.number.isRequired,
startingPage: React.PropTypes.number.isRequired
};
Pagination.defaultProps = {
pageSize: 4,
startingPage: 1
};
class Content extends React.Component {
render() {
const data = this.props.data;
return (
<div className='content'>
{data.map((item) => {
return (
<div className='content__item'>
{item.id} {item.item_name}
</div>
);
})}
</div>
);
}
}
class App extends React.Component {
render() {
return (
<Pagination
data={sampleData()}
>
<Content />
</Pagination>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
function sampleData() {
return (
[{"id":1,"item_name":"Item 1"},
{"id":2,"item_name":"Item 2"},
{"id":3,"item_name":"Item 3"},
{"id":4,"item_name":"Item 4"},
{"id":5,"item_name":"Item 5"},
{"id":6,"item_name":"Item 6"},
{"id":7,"item_name":"Item 7"},
{"id":8,"item_name":"Item 8"},
{"id":9,"item_name":"Item 9"},
{"id":10,"item_name":"Item 10"}]
);
}
Please like share subscribe and give positive feedback to motivate me to write more for you.
For more tutorials please visit my website.
Thanks:)
Happy Coding:)
Top comments (0)