如何在我的table.js页面中包括分页？

Question

I am working on a project that fetches data from an API and displays it in the form of table. The project is working fine. I am facing a problem with pagination. I want to display max 5 items on a page and do something that allows my application to create multiple pages based on the data that is fetched. this is my posts.js page.

import React from 'react'
import MyTable from './table'

export default class Posts extends React.Component {
    constructor(props) {
        super(props);

        this.columns = [
            {
                name: "ID",
                key: "id"
            }, {
                name: "Title",
                key: "title"
            }, {
                name: "Body",
                key: "body"
            }
        ];

        this.maxItems = 5; 
    };

    state = {
        pgNo: 0,
        table: [],
        isFetching: true

    };
    componentDidMount() {
        fetch("https://jsonplaceholder.typicode.com/posts")
            .then(response => response.json())
            .then(res => {
                this.setState({table: res, isFetching: false});

            });



        }



    render() {
        return this.state.isFetching
            ? (
                <div
                    className="loader"
                    style={{
                    marginLeft: "50%"
                }}>
                    <img src="/assets/index.svg"/>
                </div>
            )
            : (

                <MyTable pgNo ={this.state.pgNo}
                         maxItems = {this.maxItems}
                         columns={this.columns} 
                         data={this.state.table}
                         />

            )
    }

}

And here is my table.js page

import React from 'react'


export default class MyTable extends React.Component {

    constructor(props) {
        super(props);

    }


    createTable = () => {


        let tableHeader = <thead>
            <tr>
                {this.props.columns.map(column => {
                        return <th key={column.name}>
                            {column.name}
                        </th>
                    })}
            </tr>
        </thead>;

        let tableRows = [];
        for (let i = this.props.pgNo*this.props.maxItems ; i <(this.props.pgNo + 1)*this.props.maxItems-1; i++) {


                let row = <tr key={i}>
                    {this.props.columns.map(column => {
                            return <td key={column.key}>
                                {this.props.data[i][column.key]}
                            </td>
                        })}
                </tr>

                tableRows.push(row)
            }


        let tableBody = <tbody>{tableRows}</tbody>;
        return <table
            className="table table-bordered"
            style={{
            marginLeft: "33%",
            marginRight: "5%"
        }}>{tableHeader}{tableBody}</table>;
    }
    render() {
        return (
            <div className="col-md-6">
                <div className="container-fluid">
                    <div className="content">
                        {this.createTable()}

                    </div>
                </div>
            </div>
        )
    }

}

Also feel free to point out any mistakes i have made in this code.All the help is appreciated.

Answer 1

This is the correct Code

users page.

class Table extends React.Component {
    constructor(props) {
        super(props);

        this.columns = [
            {
                name: "ID",
                key: "id"
            }, {
                name: "Name",
                key: "name"
            }, {
                name: "Username",
                key: "username"
            }, {
                name: "Email",
                key: "email"
            }, {
                name: "Website",
                key: "website"
            }
        ];

        this.maxItems = 5; 
    };

    state = {
        pgNo: 0,
        table: [],

        url:"/user"

    };
    componentDidMount() {
        this.props.fetchuser()
        console.log(this.props.user);
        console.log("columns",this.columns);
    }




    render() {
        console.log(this.props.user);
        return (
            this.props.user.length === 0 ?
                ( <div
                    className="loader"
                    style={{
                    marginLeft: "50%"
                }}>
                    <img src="/assets/index.svg"/>
                </div>) :
                (
                    <MyTable pgNo ={this.state.pgNo}
                         maxItems = {this.maxItems}
                         columns={this.columns} 
                         data={this.props.user}
                         url={this.state.url}/>
                )
        )
    }

}

Table page.

export default class MyTable extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            currentPage: this.props.pgNo,
            details: [],
            id: null
        }
        this.MaxPages = 0;

    }

    PrevButton() {

        if (this.state.currentPage === 0) {
            return (null);
        } else {
            return (
                <button
                    className="btn btn-primary"
                    type="button"
                    key={this.state.currentPage}
                    style={{
                    float: "left"
                }}
                    onClick=
                    { () => { this.setState({ currentPage: this.state.currentPage - 1 }) } }>
                    Previous Page
                </button>
            );
        }

    }

    NextButton() {
        if (this.state.currentPage === this.MaxPages - 1) {
            return (null);
        } else {
            return (

                <button
                    className="btn btn-primary"
                    style={{
                    float: "right"
                }}
                    key={this.props.pgNo}
                    onClick={() => {
                    this.setState({
                        currentPage: this.state.currentPage + 1
                    })
                }}>
                    Next Page
                </button >
            );
        }
    }

    AddButton() {
        return (
            <Link to={`${this.props.url}/addnew${this.props.url}`}>

                <button
                    style={{
                    float: "right"
                }}
                    className="btn btn-primary"><Faplus/>
                </button>

            </Link>
        );
    }

    createTable = () => {

        let tableHeader = <thead>
            <tr>
                {this.props.columns.map(column => {
                        return <th key={column.name}>
                            {column.name}
                        </th>
                    })}
            </tr>

        </thead>;
        this.state.number = this.state.number + 1;
        let tableRows = [];
        for (let i = this.state.currentPage * this.props.maxItems; (i < (this.state.currentPage + 1) * this.props.maxItems) && (i <= this.props.data.length); i++) {


            let row = <tr key={i}>
                {this
                    .props
                    .columns
                    .map(column => {

                        return (
                            <td key={column.key}>

                                <Link to={`${this.props.url}/details/${i + 1}`}>
                                    {this.props.data[i][column.key]}</Link>

                            </td>
                        )
                    })}

            </tr>

            tableRows.push(row)
        }
        for (let i = 0; i <= Math.ceil(this.props.data.length / this.props.maxItems); i++) {
            this.MaxPages = i;

        }

        let tableBody = <tbody className="name">{tableRows}</tbody>;
        return <table
            style={{
            marginTop: "10%",
            width: "100%"
        }}>{tableHeader}{tableBody}
        </table>;
    }

    render() {

        return (
            <div className="row">
                <div className="col-md-2 offset-md-10">{this.AddButton()}</div>
                <div className="col-md-8 offset-md-3 table ">

                    {this.createTable()}

                </div>
                <div className="col-md-8 offset-md-3">
                    {/* {this.FirstButton()} */}
                    {this.PrevButton()}

                    {this.NextButton()}
                    {/* {this.LastButton()} */}
                </div>
            </div>
        )
    }

}