how to implement react js pagination - reactjs

Question

i am using react-js-pagination.
i am able to fetch the data and can show the list of data. but i am trying to impelment paggination using react-js-pagination. i am able to show paggination bar in button but not able to get functionality.
here i am trying show 3 records per page.
UI
<div style={pannelFooter}>
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={3}
totalItemsCount={this.state.projectList.length}
pageRangeDisplayed={5}
onChange={this.handlePageChange}
/>
</div>
Method
handlePageChange(pageNumber) {
this.setState({ activePage: pageNumber });
}
Constructor
constructor(props) {
super(props);
this.state = {
activePage: 1,
projectList: [],
originalProjectList: []
};
this.handlePageChange = this.handlePageChange.bind(this);
}
FUll Component
import React, { Component } from 'react';
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
import {
BrowserRouter as Router,
Route,
IndexRoute,
Link,
} from 'react-router-dom';
import ProjectDetails from './ProjectDetails';
import DashboardContainer from '../UIcomponent/DashboardContainer';
const pannelWidth = {
width: '90%'
};
const pannelHeader = {
color: 'white'
};
const pannelFooter = {
float: 'right'
};
class ProjectList extends Component {
constructor(props) {
super(props);
this.state = {
activePage: 1,
searchText: '',
isdiagram:true,
isMax:false,
projectList: [],
originalProjectList: []
};
//this.handlePageChange = this.handlePageChange.bind(this);
this.projectDetails = this.projectDetails.bind(this);
this.deleteMessage = this.deleteMessage.bind(this);
this.updateInputValue = this.updateInputValue.bind(this);
this.setSize=this.setSize.bind(this);
}
componentDidMount() {
let d = '';
$.get("http://localhost:8008/api/navigation/all", function (data) {
d = data;
this.setState({
projectList: d,
originalProjectList: d
});
}.bind(this));
}
handlePageChange(pageNumber) {
this.setState({ activePage: pageNumber });
console.log(this.state.projectList);
}
projectDetails(item, index) {
console.log(index);
}
deleteMessage(item, index) {
showconfrim("Do you want to delete this Project?", this.deleteProject(item, index));
console.log('delete');
}
deleteProject(item, index) {
$("#confirmwindow").modal('hide');
console.log('delete');
}
setSize(){
this.setState({
isMax:!this.state.isMax
});
if(!this.state.isMax){
//clear style for jquery animate;
$(this.refs.selfdiv).attr("style",null);
setTimeout(()=>{
$(this.refs.selfdiv).animate({
top:'0px',
right: '0px',
bottom: '0px',
left: '0px'
},500);
},100);
}
console.log(this.props.children);
if(this.props.children[1].props['data-event']){
var self=this;
setTimeout(()=>{
self.props.children[1].props['data-event'].call();
},700);
}
}
updateInputValue(event) {
this.setState({
searchText: event.target.value
}, function () {
let textToSearch = this.state.searchText;
let originalData = this.state.projectList;
if (textToSearch != undefined || textToSearch != '') {
let searchData = [];
for (var i = 0; i < this.state.projectList.length; i++) {
if (this.state.projectList[i].name.indexOf(textToSearch) != -1 || this.state.projectList[i].description.indexOf(textToSearch) != -1) {
searchData.push(this.state.projectList[i]);
}
}
this.setState({
projectList: searchData
});
}
if(textToSearch == '') {
this.setState({
projectList: this.state.originalProjectList,
});
}
});
}
render() {
var listItems = this.state.projectList.map((item, index) => {
return <tr key={index}>
<td onClick={e => this.projectDetails(item, index)}><a><u>{item.name}</u></a></td>
<td>{item.description}</td>
<td><i className="glyphicon glyphicon-trash" onClick={e => this.deleteMessage(item, index)}></i></td>
</tr>
});
return (
<div className="container" style={pannelWidth} ref="selfdiv">
<br />
<div className="panel panel-primary">
<div className="panel-heading">
<div className="row">
<div className="col-md-2 col-lg-2">
<h4 style={pannelHeader}>Project List</h4>
</div>
<div className="col-md-6 col-lg-6">
<input type="text" className="form-control" placeholder="Search" value={this.state.searchText} onChange={this.updateInputValue}/>
</div>
<div className="col-md-2 col-lg-2">
<button className="btn btn-sm btn-success">Create New Project</button>
</div>
<div className="col-md-2 col-lg-2">
<div className="captiontoolbar buttoncontainer">
<span onClick={this.setSize} style={pannelFooter} className={
this.state.isMax ? ("boxMaxsize glyphicon glyphicon-resize-small") : ("boxMaxsize glyphicon glyphicon-fullscreen")
}></span>
</div>
</div>
</div>
</div>
<div className="panel-body">
<table className="table table-striped">
<thead>
<tr>
<th><b>Project Name</b></th>
<th><b>Description</b></th>
<th><b>Action</b></th>
</tr>
</thead>
<tbody>
{listItems}
</tbody>
</table>
</div>
<div style={pannelFooter}>
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={3}
totalItemsCount={this.state.projectList.length}
pageRangeDisplayed={5}
onChange={this.handlePageChange.bind(this)}
/>
</div>
</div>
</div>
);
}
}
export default ProjectList;

Answer 1

var indexOfLastTodo = this.state.activePage * this.state.itemPerPage;
var indexOfFirstTodo = indexOfLastTodo - this.state.itemPerPage;
var renderedProjects = this.state.projectList.slice(indexOfFirstTodo, indexOfLastTodo);
var listItems = renderedProjects.map((item, index) => {
return <tr key={index}>
<td onClick={e => this.projectDetails(item, index, e)}><a><u>{item.projectName}</u></a></td>
<td>{item.description}</td>
<td><i className="glyphicon glyphicon-trash" onClick={(e) => { if (window.confirm('All its related data will be deleted. Are you sure you want to delete?')) this.deleteMessage(item, index) } } > </i></td>
<td><i className="glyphicon glyphicon-edit" id="edit" onClick={e => this.editProject(item, index, e)}></i></td>
</tr>
});
Here need to update the projectList array using slice(firstIndex, lastIndex). then subarray should be use for rander purpose.
and paggination tag should be like below
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={this.state.itemPerPage}
totalItemsCount={this.state.originalProjectList.length}
pageRangeDisplayed={5}
onChange={this.handlePageChange.bind(this)}
/>

Answer 2

Take advantage of ES6.
So, insted of doing something like this:
this.handlePageChange = this.handlePageChange.bind(this);
You can do this:
handlePageChange = (pageNumber) => {
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
}
Hope this helps.