reactjs通过表分页

Question

我正在使用reactjs。我正在用api列出数据。我使用reactstrap表向用户显示我收到的数据。但我想分页。

一页上最多显示6条记录，随后几页上显示其他记录。我们如何通过以下代码帮助您做到这一点？

我在Google上进行了一些研究，但无法，

谢谢大家，我的朋友们。

import React, { Component, useState } from "react";
import withAuth from "../../components/helpers/withAuth";
import {
  Button,
  Card,
  CardBody,
  CardHeader,
  Col,
  Pagination,
  PaginationItem,
  PaginationLink,
  Row,
  Table,
} from "reactstrap";

class CustomerDebt extends Component {
  constructor(props) {
    super(props);

    this.domain = `http://127.0.0.1:8000`;
    this.state = {
      isLoaded: true,

      items: [], //Customer Debt Items
    };
  }

  async componentDidMount() {
    //customer debt list
    await fetch(
      `${this.domain}/api/debt/list?customer=` +
        this.props.customerInfo.customer.id,
      {
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
          "Content-Type": "application/json"
        }
      }
    )
      .then(res => {
        if (res.ok) {
          return res.json();
        } else {
          return res.json().then(err => Promise.reject(err));
        }
      })
      .then(json => {
        this.setState({
          items: json,
        });
        this.abortController.abort();
      })
      .catch(error => {
      return error;
      });
  }

  render() {
    const { isLoaded, items } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div className={"animated fadeIn container-fluid"}>
          <Row>
            <Col>
              <Card>
                <CardHeader>
                  <i className="fa fa-align-justify" /> Müşteri Borcu
                </CardHeader>
                <CardBody>
                  <Table hover bordered striped responsive size="sm">
                    <thead>
                      <tr>
                        <th width={"10"} />
                        <th width={"15"}>No</th>
                        <th style={{ display: "none" }}>User</th>
                        <th style={{ display: "none" }}>Key</th>
                        <th style={{ display: "none" }}>CreatedUserKey</th>
                        <th width={"40"}>Total debt</th>
                        <th width={"40"}>Received amount</th>
                        <th scope={"row"}>Description</th>
                        <th width={"20"}>Payment Date</th>
                      </tr>
                    </thead>
                    <tbody>
                      {items.map(item => {
                        return (
                          <tr key={item.id}>
                            <td>{item.id}</td>
                            <td style={{ display: "none" }}>{item.user}</td>
                            <td style={{ display: "none" }}>{item.debtKey}</td>
                            <td style={{ display: "none" }}> {" "} {item.createduserKey}{" "} </td>
                            <td>{item.totalDebt}</td>
                            <td>{item.receivedAmount}</td>
                            <td>{item.description}</td>
                            <td> {new Date(item.paymentDate).toLocaleString()} </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </Table>
                  <nav>
                    <Pagination>
                      <PaginationItem>
                        <PaginationLink previous tag="button">
                          Back
                        </PaginationLink>
                      </PaginationItem>
                      <PaginationItem active>
                        <PaginationLink tag="button">1</PaginationLink>
                      </PaginationItem>
                      <PaginationItem>
                        <PaginationLink tag="button">2</PaginationLink>
                      </PaginationItem>
                      <PaginationItem>
                        <PaginationLink tag="button">3</PaginationLink>
                      </PaginationItem>
                      <PaginationItem>
                        <PaginationLink tag="button">4</PaginationLink>
                      </PaginationItem>
                      <PaginationItem>
                        <PaginationLink next tag="button">
                          Next
                        </PaginationLink>
                      </PaginationItem>
                      <PaginationItem></PaginationItem>
                    </Pagination>
                  </nav>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </div>
      );
    }
  }
}
export default CustomerDebt;

Answer 1

您需要根据记录数动态生成分页按钮，然后按分页按钮，如果要基于页码和每页大小显示项目，则设置页码并创建一个数组。

这是示例代码，可让您了解如何完成此操作。由于这是您的工作，因此不完整或没有错误证明。我希望能得到这个主意。

class CustomerDebt extends Component {
  constructor(props) {
    super(props);

    this.domain = `http://127.0.0.1:8000`;
    this.state = {
      isLoaded: true,

      items: [], //Customer Debt Items,
      pageItems: [],
      page: 0,
      pageSize: 6
    };
  }

  async componentDidMount() {
    const { pageSize } = this.state;
    //customer debt list
    await fetch(
      `${this.domain}/api/debt/list?customer=` +
        this.props.customerInfo.customer.id,
      {
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
          "Content-Type": "application/json"
        }
      }
    )
      .then(res => {
        if (res.ok) {
          return res.json();
        } else {
          return res.json().then(err => Promise.reject(err));
        }
      })
      .then(json => {
        this.setState({
          items: json,
          pageItems: json.slice(0, pageSize)
        });
        this.abortController.abort();
      })
      .catch(error => {
      return error;
      });
  }

  render() {
    const { isLoaded, pageItems, items, page, pageSize } = this.state;
    const pages = Math.ceil(items.length / page);
    const paginationItems = Array(pages).fill('').map((i, index) => (
    <PaginationItem active={page === index}>
      <PaginationLink tag="button" onClick={() => this.setState({page: index })}}>2</PaginationLink>
     </PaginationItem>
    ));
    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div className={"animated fadeIn container-fluid"}>
          <Row>
            <Col>
              <Card>
                <CardHeader>
                  <i className="fa fa-align-justify" /> Müşteri Borcu
                </CardHeader>
                <CardBody>
                  <Table hover bordered striped responsive size="sm">
                    <thead>
                      <tr>
                        <th width={"10"} />
                        <th width={"15"}>No</th>
                        <th style={{ display: "none" }}>User</th>
                        <th style={{ display: "none" }}>Key</th>
                        <th style={{ display: "none" }}>CreatedUserKey</th>
                        <th width={"40"}>Total debt</th>
                        <th width={"40"}>Received amount</th>
                        <th scope={"row"}>Description</th>
                        <th width={"20"}>Payment Date</th>
                      </tr>
                    </thead>
                    <tbody>
                      {pageItems.map(item => {
                        return (
                          <tr key={item.id}>
                            <td>{item.id}</td>
                            <td style={{ display: "none" }}>{item.user}</td>
                            <td style={{ display: "none" }}>{item.debtKey}</td>
                            <td style={{ display: "none" }}> {" "} {item.createduserKey}{" "} </td>
                            <td>{item.totalDebt}</td>
                            <td>{item.receivedAmount}</td>
                            <td>{item.description}</td>
                            <td> {new Date(item.paymentDate).toLocaleString()} </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </Table>
                  <nav>
                    <Pagination>
                      <PaginationItem onClick={() => this.setState(prev => ({page: prev.page -1}))}>
                        <PaginationLink>
                          Back
                        </PaginationLink>
                      <PaginationItem onClick={() => this.setState(prev => ({page: prev.page + 1}))}>
                        <PaginationLink next tag="button">
                          Next
                        </PaginationLink>
                      </PaginationItem>
                      <PaginationItem></PaginationItem>
                    </Pagination>
                  </nav>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </div>
      );
    }
  }
}
export default CustomerDebt;

Answer 2

请参见CodeSandbox上的表分页示例。

Answer 3

正如您所说，但仅遇到此错误。

class CustomerDebt extends Component {
  constructor(props) {
    super(props);

    this.domain = `http://127.0.0.1:8000`;
    this.state = {
      isLoaded: true,

      items: [], //Customer Debt Items,
      pageItems: [],
      page: 0,
      pageSize: 6
    };
  }

  async componentDidMount() {
    const { pageSize } = this.state;
    //customer debt list
    await fetch(
      `${this.domain}/api/debt/list?customer=` +
        this.props.customerInfo.customer.id,
      {
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
          "Content-Type": "application/json"
        }
      }
    )
      .then(res => {
        if (res.ok) {
          return res.json();
        } else {
          return res.json().then(err => Promise.reject(err));
        }
      })
      .then(json => {
        this.setState({
          items: json,
          pageItems: json.slice(0, pageSize)
        });
        this.abortController.abort();
      })
      .catch(error => {
      return error;
      });
  }

  render() {
    const { isLoaded, pageItems, items, page, pageSize } = this.state;
    const pages = Math.ceil(items.length / page);
    const paginationItems = Array(pages).fill('').map((i, index) => (
    <PaginationItem active={page === index}>
      <PaginationLink tag="button" onClick={() => this.setState({page: index })}}>2</PaginationLink>
     </PaginationItem>
    ));
    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div className={"animated fadeIn container-fluid"}>
          <Row>
            <Col>
              <Card>
                <CardHeader>
                  <i className="fa fa-align-justify" /> Müşteri Borcu
                </CardHeader>
                <CardBody>
                  <Table hover bordered striped responsive size="sm">
                    <thead>
                      <tr>
                        <th width={"10"} />
                        <th width={"15"}>No</th>
                        <th style={{ display: "none" }}>User</th>
                        <th style={{ display: "none" }}>Key</th>
                        <th style={{ display: "none" }}>CreatedUserKey</th>
                        <th width={"40"}>Total debt</th>
                        <th width={"40"}>Received amount</th>
                        <th scope={"row"}>Description</th>
                        <th width={"20"}>Payment Date</th>
                      </tr>
                    </thead>
                    <tbody>
                      {pageItems.map(item => {
                        return (
                          <tr key={item.id}>
                            <td>{item.id}</td>
                            <td style={{ display: "none" }}>{item.user}</td>
                            <td style={{ display: "none" }}>{item.debtKey}</td>
                            <td style={{ display: "none" }}> {" "} {item.createduserKey}{" "} </td>
                            <td>{item.totalDebt}</td>
                            <td>{item.receivedAmount}</td>
                            <td>{item.description}</td>
                            <td> {new Date(item.paymentDate).toLocaleString()} </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </Table>
                  <nav>
                    <Pagination>
                      <PaginationItem onClick={() => this.setState(prev => ({page: prev.page -1}))}>
                        <PaginationLink>
                          Back
                        </PaginationLink>
                      <PaginationItem onClick={() => this.setState(prev => ({page: prev.page + 1}))}>
                        <PaginationLink next tag="button">
                          Next
                        </PaginationLink>
                      </PaginationItem>
                      <PaginationItem></PaginationItem>
                    </Pagination>
                  </nav>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </div>
      );
    }
  }
}
export default CustomerDebt;