react-bootstrap-table如何通过分页实现数据分批加载

react-bootstrap-table 内置的分页默认是前端全量分页逻辑，没有直接提供绑定后端分页拉取的配置项，通过自定义接管分页状态的方式即可实现需求，核心思路是把分页控制权从组件内部转移到业务代码层，具体实现步骤如下：

• 关闭组件内置的前端数据切片逻辑，分页相关的状态全部由业务层自行维护
• 绑定分页操作的回调事件，在用户切页、修改每页条数时触发对应页的API请求
• 仅将当前接口返回的分页数据传给表格渲染，同时把总条数回传给分页组件用于计算总页数

核心实现代码示例 #

import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import { useState, useEffect } from 'react';

const DataTable = () => {
  // 分页核心状态
  const [tableData, setTableData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);

  // 拉取指定页数据
  const loadPageData = async (page, size) => {
    setLoading(true);
    // 替换为实际业务接口，传分页参数
    const res = await fetch(`/your/api/endpoint?pageNum=${page}&pageSize=${size}`);
    const { list, totalCount } = await res.json();
    setTableData(list);
    setTotal(totalCount);
    setLoading(false);
  };

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

  const paginationConfig = paginationFactory({
    custom: true, // 关键配置：开启自定义分页，关闭组件内置前端分页逻辑
    page: currentPage,
    sizePerPage: pageSize,
    totalSize: total,
    // 切页回调
    onPageChange: (newPage) => {
      setCurrentPage(newPage);
      loadPageData(newPage, pageSize);
    },
    // 修改每页条数回调
    onSizePerPageChange: (newSize) => {
      setPageSize(newSize);
      setCurrentPage(1);
      loadPageData(1, newSize);
    }
  });

  // 替换为实际业务列配置
  const columns = [
    { dataField: 'id', text: 'ID' },
    { dataField: 'title', text: '标题' },
    { dataField: 'createTime', text: '创建时间' }
  ];

  return (
    <BootstrapTable
      keyField="id"
      data={tableData}
      columns={columns}
      loading={loading}
      pagination={paginationConfig}
    />
  );
};

export default DataTable;

注意事项 #

• 传给表格data属性的永远是当前接口返回的单页数据，不要把全量数据传入，否则会触发组件内置的前端分页逻辑
• 如果使用的是1.x旧版本的react-bootstrap-table，实现逻辑完全一致，找到分页配置对应的onPageChange回调接管状态即可，不需要额外引入第三方库
• 记得在接口请求异常的分支里重置loading状态，避免表格持续处于加载态无法操作

内容的提问来源于stack exchange，提问作者M Maaz Azhar