ReactJS中API结合Datatable实现分页及空数据全量展示问题求助

问题根源 #

空数据状态下切换到“全部”页尺寸触发NaN警告和页码异常，本质是组件计算分页参数时，用0（空数据总条数）进行了无效运算，或是对“全部”对应的数值处理不当（比如映射为0或未定义值）。

具体解决方案 #

1. 修正“全部”选项的数值映射

把“全部”对应的页尺寸值设为Infinity（或一个远大于预期最大数据量的数值，比如100000），而非0或其他无效值。这样空数据时，0除以Infinity结果为0，不会产生NaN。

// 页尺寸选项示例
const pageSizeOptions = [
  { label: '10条', value: 10 },
  { label: '20条', value: 20 },
  { label: '全部', value: Infinity }
];

2. 空数据场景下的分页参数兜底

在分页逻辑中加入空数据判断，强制将分页参数设为有效值，避免无效计算：

const totalItems = data.length;
// 若选中“全部”，则页尺寸设为总数据量；否则用当前选中值
const pageSize = currentPageSize === Infinity ? totalItems : currentPageSize;
// 空数据时总页数设为1，避免NaN
const totalPages = totalItems === 0 ? 1 : Math.ceil(totalItems / pageSize);
// 空数据时当前页码固定为1
const currentPage = totalItems === 0 ? 1 : currentPage;

3. 自定义分页组件（针对第三方Datatable库）

如果使用第三方组件（如react-data-table-component），可以通过自定义分页组件覆盖默认逻辑，处理空数据场景：

import DataTable from 'react-data-table-component';

const CustomPagination = ({ paginationProps }) => {
  const { totalRows, currentPage, rowsPerPage, onChangePage, onChangeRowsPerPage } = paginationProps;
  
  // 空数据时的安全参数
  const safeTotalRows = totalRows || 0;
  const safeTotalPages = safeTotalRows === 0 ? 1 : Math.ceil(safeTotalRows / rowsPerPage);
  const safeCurrentPage = safeTotalRows === 0 ? 1 : currentPage;

  return (
    <div className="pagination-bar">
      <select
        value={rowsPerPage}
        onChange={(e) => onChangeRowsPerPage(Number(e.target.value))}
      >
        <option value={10}>10条</option>
        <option value={20}>20条</option>
        <option value={Infinity}>全部</option>
      </select>
      <span>第 {safeCurrentPage} 页 / 共 {safeTotalPages} 页</span>
      {/* 分页按钮逻辑（上一页、下一页等） */}
    </div>
  );
};

// 在Datatable中使用自定义分页
<DataTable
  columns={yourColumns}
  data={yourData}
  pagination
  customPagination={<CustomPagination />}
  rowsPerPageOptions={[10, 20, Infinity]}
/>

4. API数据加载后的同步处理

当API返回数据后，无需手动调整“全部”选项——因为Infinity会自动适配为返回数据的总条数，组件会直接展示全量数据。如果需要根据数据量自动切换页尺寸，也可以在数据加载完成后加入判断逻辑。

内容的提问来源于stack exchange，提问作者Nidhi