如何为使用动态数据源的表格添加分页功能

核心逻辑是把原来的前端分页模式改为服务端分页，所有分页计算逻辑和后端接口对齐，前端只负责传分页参数、渲染对应页返回的数据即可，具体实现步骤如下：

• 第一步：定义分页核心状态
  单独维护三个分页参数：当前页码、每页展示条数、数据总条数，不要和表格数据源耦合存储。
• 第二步：调整表格分页组件为受控模式
  关闭分页组件自带的前端切页能力，将分页组件的当前页、每页条数、总条数属性和上一步定义的状态绑定。比如AntD Table要把pagination属性设为受控配置，ElementUI Table要给分页组件的current-page、page-size做双向绑定，禁用自带的前端数据切割逻辑。
• 第三步：封装分页数据拉取方法
  写独立的接口请求方法，调用时把当前的页码、每页条数作为参数传给后端，后端返回对应页的列表数据和总数据量；请求成功后做两个操作：1. 将返回的列表赋值给表格的dataSource；2. 把返回的总条数更新到分页状态中，分页组件会自动计算总页数。
• 第四步：绑定分页切换事件
  给分页组件的页码切换、每页条数修改事件绑定回调，回调触发时直接更新分页参数，然后调用封装好的数据拉取方法即可，前端不需要做任何数据截取操作。

以下是React+AntD场景的示例代码：

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

const DynamicPaginationTable = () => {
  // 分页状态管理
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0
  });
  const [tableData, setTableData] = useState([]);

  // 分页数据拉取方法
  const fetchPageData = async (page, pageSize) => {
    // 调用后端接口传分页参数，可额外拼接筛选、排序参数
    const res = await request('/api/table/list', {
      params: { page, pageSize }
    });
    setTableData(res.data.list);
    setPagination(prev => ({
      ...prev,
      total: res.data.total,
      current: page
    }));
  };

  // 初始化加载第一页数据
  useEffect(() => {
    fetchPageData(pagination.current, pagination.pageSize);
  }, []);

  // 分页变更回调
  const onPageChange = (page, pageSize) => {
    fetchPageData(page, pageSize);
  };

  return (
    <Table
      dataSource={tableData}
      columns={yourColumnConfig}
      rowKey="id"
      pagination={{
        ...pagination,
        showSizeChanger: true,
        onChange: onPageChange
      }}
    />
  )
}

补充注意：如果表格有筛选、排序功能，变更筛选条件时需要把页码重置为1再拉取数据，避免出现筛选后总页数减少、当前页码不存在的异常。

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