react.js中如何实现对表中列表数据的分页？

Posted 2023-03-10

【中文标题】react.js中如何实现对表中列表数据的分页？

【英文标题】：How to implement pagination to a list data in a table in react.js?

【发布时间】：2022-01-21 20:51:44

【问题描述】：

需要快速帮助！我有来自 API 的表格中呈现的数据列表。我需要将此数据列表分页为小数据列表。

这是 VendorsDetail.js 的代码，它在表格中显示数据列表

import React,  useState, useEffect  from "react";
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
import axios from "axios";
import VendorDetailsBrief from "./VendorDetailsBrief";
import Pagination from "./Pagination";

const VendersDetail = ( textMe ) => 
  const [data, setData] = useState();
  const foo = "cpe:2.3:a:oracle:peoplesoft_enterprise:8.22.14";
  const baseURL =
    "https://services.nvd.nist.gov/rest/json/cves/1.0?cpeMatchString=" + foo;

  useEffect(() => 
    axios
      .get(baseURL)
      .then((response) => 
        setData(response.data);
      )
      .then(
        (response) => ,
        (err) => 
          alert(err);
        
      );
  , []);

  const DisplayData = data?.result?.CVE_Items?.map((vender) => 
    return (
      <tr>
        <td className="color_id font-semibold">
          vender?.cve?.CVE_data_meta?.ID
        </td>
        <td className="w-96">
          vender?.cve?.description?.description_data?.[0]?.value
        </td>
        <td>vender?.impact?.baseMetricV2?.exploitabilityScore</td>
        <td>vender?.impact?.baseMetricV2?.severity</td>
        <td>vender?.impact?.baseMetricV2?.impactScore</td>
      </tr>
    );
  );
  return (
    <div className="z-100 flex justify-center items-center mt-10">
      <div className="text-black">
        <div className="rounded overflow-hidden flex  justify-center items-center">
          <table class="table table-striped ">
            <thead>
              <tr>
                <th>Vuln ID</th>
                <th>Description Data</th>
                <th>Exploitability Score</th>
                <th>Severity</th>
                <th>Impact Score</th>
              </tr>
            </thead>
            <tbody>DisplayData</tbody>
          </table>
        </div>
      </div>
    </div>
  );
;

export default VendersDetail;

Pagination.js

从“反应”导入反应；

const Pagination = ( postsPerPage, totalPosts, paginate ) => 
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) 
    pageNumbers.push(i);
  

  return (
    <nav>
      <ul className="pagination">
        pageNumbers.map((number) => (
          <li key=number className="page-item">
            <a onClick=() => paginate(number) href="!#" className="page-link">
              number
            </a>
          </li>
        ))
      </ul>
    </nav>
  );
;

export default Pagination;

如何在这个特定的数据列表中实现分页？谢谢

【参考方案1】：

使用逻辑创建父组件以从 URL 和分页 onCLick 处理程序获取数据。

父组件应该渲染 VendorsDetail 组件和 Pagination 组件。

将要显示的数据传递给 VendorsDetails 组件，并将 getSubsequentData 处理程序传递给 Pagination 组件。

如果用户点击特定页码，调用 getSubsequentData 处理程序并使用特定参数，更新父组件的状态，这将更新 VendorsDetail 组件。

const ParentComponent = () =>

 const [data, setData] = useState()

 useEffect = (() => 
   // axios call to get initial data from the URL
 )

 getSubsequentData = (URL) => 
   // axios call to get data based on the URL.
   // LInk this to pagination onClick
 
       return(
 <VendorsDetail data=data />
 <Pagination getNextData=getSubsequentData/>

)

【讨论】：

感谢您的回答