how to implement react js pagination

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;

why are using this this.handlePageChange = this.handlePageChange.bind(this);. I believe you simply need to call this.handlePageChange.bind(this); in your constructor instead of equating it to this.handlePageChange — Abdul Samad
– Abdul Samad, Commented Feb 23, 2018 at 6:11
after removing from constructor it is showing error Uncaught TypeError: this.setState is not a function — Sangram Badi
– Sangram Badi, Commented Feb 23, 2018 at 6:13
hmmm. Remove it from the constructor and use this code onChange={this.handlePageChange.bind(this)} — Abdul Samad
– Abdul Samad, Commented Feb 23, 2018 at 6:25

Sangram Badi · Accepted Answer · 2018-11-05 08:15:17Z

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)}
/>

Dženis H. · Accepted Answer · 2018-04-12 04:59:34Z

0

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.

answered Apr 12, 2018 at 4:59

Dženis H.

7,8923 gold badges30 silver badges49 bronze badges

1 Comment

Sangram Badi Over a year ago

this is not the problem. i have answer. i'll post this

Collectives™ on Stack Overflow

how to implement react js pagination

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related