Antd表格动态分页实现：无总页数时的后端数据加载方案

Antd的分页组件并不强制要求预设总页数，我们可以通过维护当前页码、数据缓存/数据源、是否还有更多数据这几个状态，配合后端接口实现动态加载，同时在返回空数据时自动禁用下一页按钮。

核心实现思路 #

1. 维护三个关键状态：
   • currentPage：当前页码
   • dataCache：缓存已加载页面的数据（优化切换上一页的体验）
   • hasMore：标记是否还有未加载的数据
2. 封装数据请求函数，根据页码从后端获取数据，返回空数据时将hasMore设为false
3. 独立使用Pagination组件（关闭表格自带分页），通过pageCount属性控制最大页码：
   • 当hasMore为true时，最大页码设为currentPage + 1，下一页按钮可点击
   • 当hasMore为false时，最大页码设为currentPage，下一页按钮自动禁用

完整代码示例 #

import { Table, Pagination, Spin } from 'antd';
import { useState, useEffect } from 'react';

const DynamicTable = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [dataCache, setDataCache] = useState({});
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);
  const pageSize = 10; // 每页条数

  // 替换为你的实际后端接口请求逻辑
  const fetchPageData = async (page) => {
    setLoading(true);
    try {
      const response = await fetch(`/your-api-url?page=${page}&pageSize=${pageSize}`);
      const data = await response.json();

      if (data.length > 0) {
        setDataCache(prev => ({ ...prev, [page]: data }));
        setHasMore(true);
      } else {
        // 返回空数据，标记无更多内容
        setHasMore(false);
      }
    } catch (error) {
      console.error('数据请求失败:', error);
      setHasMore(false);
    } finally {
      setLoading(false);
    }
  };

  // 初始化加载第一页
  useEffect(() => {
    fetchPageData(1);
  }, []);

  // 处理分页切换
  const handlePageChange = (page) => {
    setCurrentPage(page);
    // 已缓存的页面直接用缓存，未缓存且还有数据时才请求
    if (!dataCache[page] && hasMore) {
      fetchPageData(page);
    }
  };

  // 表格列配置，根据业务需求修改
  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
    { title: '名称', dataIndex: 'name', key: 'name' },
    { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 150 },
  ];

  return (
    <div style={{ padding: '20px' }}>
      <Spin spinning={loading}>
        <Table
          columns={columns}
          dataSource={dataCache[currentPage] || []}
          rowKey="id"
          pagination={false} // 关闭表格自带分页，使用独立组件
          bordered
        />
      </Spin>
      <div style={{ textAlign: 'right', marginTop: '16px' }}>
        <Pagination
          current={currentPage}
          pageSize={pageSize}
          onChange={handlePageChange}
          // 通过pageCount控制最大页码，自动禁用下一页
          pageCount={hasMore ? currentPage + 1 : currentPage}
          showSizeChanger={false} // 按需开启每页条数选择器
          showQuickJumper={false} // 按需开启快速跳转
        />
      </div>
    </div>
  );
};

export default DynamicTable;

关键细节说明 #

• 数据缓存：用dataCache缓存已加载页面的数据，切换上一页时无需重复请求，提升交互流畅度
• 分页控制：pageCount是核心控制项，它定义了分页组件的最大页码，当无更多数据时，最大页码等于当前页，下一页按钮自动置灰
• 加载状态：添加Spin组件避免用户重复点击，提升体验

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