Javascript 在表格中进行分页

我正在用api列出数据。 我用reactstrap表向用户显示收到的数据。 但我想打电话

一页上最多显示6条记录，其他记录显示在后续页面上

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;

import React，{Component，useState}来自“React”；
从“../../components/helpers/withAuth”导入withAuth；
进口{
按钮
卡片
名片夹，
万向节，
上校，
标页码
分页主义，
分页链接，
一行
桌子
}从“反应带”；
类CustomerDebt扩展组件{
建造师（道具）{
超级（道具）；
此.domain=`http://127.0.0.1:8000`;
此.state={
isLoaded：是的，
项目：[]，//客户债务项目
};
}
异步组件didmount（）{
//客户债务清单
待命(
`${this.domain}/api/debt/list？customer=`+
this.props.customerInfo.customer.id，
{
标题：{
授权：`Bearer${localStorage.getItem（“令牌”）}`，
“内容类型”：“应用程序/json”
}
}
)
。然后（res=>{
如果（res.ok）{
返回res.json（）；
}否则{
返回res.json（）.then（err=>Promise.reject（err））；
}
})
。然后（json=>{
这是我的国家({
项目：json，
});
this.abortController.abort（）；
})
.catch（错误=>{
返回误差；
});
}
render（）{
const{isLoaded，items}=this.state；
如果（！已加载）{
返回装载。。。；
}否则{
返回(
穆泰里·博尔库
不
使用者
钥匙
CreatedUserKey
总债务
收到金额
描述
付款日期
{items.map（item=>{
返回(
{item.id}
{item.user}
{item.debtKey}
{''}{item.createduserKey}{'}
{item.totalDebt}
{item.receivedAmount}
{item.description}
{新日期（item.paymentDate）.toLocalString（）}
);
})}
返回
1.
2.
3.
4.
下一个
);
}
}
}
导出默认CustomerDebt；

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

这是示例代码，让您了解如何完成此操作。由于这是您的工作，因此它不完整或不存在bug。我希望你能明白我的意思

类CustomerDebt扩展组件{
建造师（道具）{
超级（道具）；
此.domain=`http://127.0.0.1:8000`;
此.state={
isLoaded：是的，
项目：[]，//客户债务项目，
pageItems:[]，
页码：0，
页面大小：6
};
}
异步组件didmount（）{
const{pageSize}=this.state；
//客户债务清单
待命(
`${this.domain}/api/debt/list？customer=`+
this.props.customerInfo.customer.id，
{
标题：{
授权：`Bearer${localStorage.getItem（“令牌”）}`，
“内容类型”：“应用程序/json”
}
}
)
。然后（res=>{
如果（res.ok）{
返回res.json（）；
}否则{
返回res.json（）.then（err=>Promise.reject（err））；
}
})
。然后（json=>{
这是我的国家({
项目：json，
pageItems:json.slice（0，pageSize）
});
this.abortController.abort（）；
})
.catch（错误=>{
返回误差；
});
}
render（）{
const{isLoaded，pageItems，items，page，pageSize}=this.state；
const pages=Math.ceil（items.length/页）；
const paginationItems=数组（页）.fill（“”）.map（（i，索引）=>(
this.setState（{page:index}}}>2
));
如果（！已加载）{
返回装载。。。；
}否则{
返回(
穆泰里·博尔库
不
使用者
钥匙
CreatedUserKey
总债务
收到金额
描述
付款日期
{pageItems.map（项=>{
返回(
{item.id}
class App extends React.Component {
  state = {
    pageSize: 2, // <- 2 items will be shown on single page
    pageIndex: 0, // 0 is a default page to show
    items: []
  };
...

...
  componentDidMount() {
    const data = [
      { id: 1, name: "Roman" },
      { id: 2, name: "Oleh" },
      { id: 3, name: "Vitalii" },
      { id: 4, name: "Mikhail" },
      { id: 5, name: "Vladislav" },
      { id: 6, name: "Anton" },
      { id: 7, name: "Yurii" },
      { id: 8, name: "Volodymir" },
      { id: 9, name: "Taras" }
    ];

    this.setState({ items: data });
  }
...


...
  handlePrevPageClick(event) {
    this.setState(prevState => ({
      pageIndex: prevState.pageIndex > 0 ? prevState.pageIndex - 1 : 0
    }));
  }

  handleNextPageClick(event) {
    this.setState(prevState => ({
      pageIndex:
        prevState.pageIndex <
        Math.ceil(prevState.items.length / prevState.pageSize)
          ? prevState.pageIndex + 1
          : prevState.pageIndex
    }));
  }


...
  render() {
    return (
      <>
        <button onClick={event => this.handlePrevPageClick(event)}>
          Prev page
        </button>
        <button onClick={event => this.handleNextPageClick(event)}>
          Next page
        </button>
        <table border="1">
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
            </tr>
          </thead>
          <tbody>
            {this.state.items
              .slice(
                this.state.pageIndex * this.state.pageSize,
                this.state.pageIndex * this.state.pageSize + this.state.pageSize
              )
              .map(item => (
                <tr>
                  <td>{item.id}</td>
                  <td>{item.name}</td>
                </tr>
              ))}
          </tbody>
        </table>
      </>
    );
  }
}