如何为React Material Table实现服务端懒分页，切换页时动态请求后端数据

你当前的表现是默认启用了Material Table的客户端分页模式，仅需要切换为服务端分页模式、对接分页变更事件即可实现需求，具体修改步骤如下：

第一步：开启服务端分页核心配置 #

给MaterialTable组件添加核心属性切换分页模式：

• 新增属性options.serverSidePagination={true}，关闭客户端全量分页逻辑，开启服务端分页模式
• 原data属性不再传入全量数据数组，仅需要传入当前页的数据集即可

第二步：对齐Spring Boot分页接口参数&返回结构 #

Spring Boot内置Pageable分页的默认参数&返回结构如下，需要和前端逻辑对齐：

请求参数约定 #

返回结构约定 #

{
  "content": [/* 当前页数据列表 */],
  "totalElements": 0, // 全量数据总条数
  "size": 10, // 本次请求的每页条数
  "number": 0 // 本次请求的实际页码
}

第三步：实现分页触发逻辑&代码示例 #

import MaterialTable from '@material-table/core';
import { useState, useEffect } from 'react';
import axios from 'axios';

const SpringBootPageTable = () => {
  // 分页相关状态
  const [currentPageData, setCurrentPageData] = useState([]);
  const [totalCount, setTotalCount] = useState(0);
  const [currentPage, setCurrentPage] = useState(0);
  const [pageSize, setPageSize] = useState(10);
  const [loading, setLoading] = useState(false);

  // 分页请求方法
  const fetchPageData = async (page, size) => {
    setLoading(true);
    try {
      const res = await axios.get('你的Spring Boot分页接口地址', {
        params: {
          page: page,
          size: size
          // 有排序、筛选需求可在此追加对应参数
        }
      });
      setCurrentPageData(res.data.content);
      setTotalCount(res.data.totalElements);
    } catch (err) {
      console.error('分页数据拉取失败', err);
    } finally {
      setLoading(false);
    }
  };

  // 首次加载触发第一页数据请求
  useEffect(() => {
    fetchPageData(currentPage, pageSize);
  }, []);

  return (
    <MaterialTable
      title="服务端分页表格"
      columns={[
        // 此处替换为你的实际列定义，和原有逻辑保持一致即可
        { title: 'ID', field: 'id' },
        { title: '名称', field: 'name' }
      ]}
      data={currentPageData}
      totalCount={totalCount}
      isLoading={loading}
      options={{
        serverSidePagination: true, // 核心配置：开启服务端分页
        pageSize: pageSize,
        pageSizeOptions: [5, 10, 20, 50], // 可选每页条数
        paginationType: 'normal'
      }}
      // 页码切换时触发
      onChangePage={(newPage) => {
        setCurrentPage(newPage);
        fetchPageData(newPage, pageSize);
      }}
      // 每页条数切换时触发
      onChangeRowsPerPage={(newPageSize) => {
        setPageSize(newPageSize);
        // 切换每页条数时默认回到第一页，可根据业务需求调整
        setCurrentPage(0);
        fetchPageData(0, newPageSize);
      }}
    />
  )
}

export default SpringBootPageTable;

注意事项 #

• 如果你的Spring Boot接口自定义页码从1开始计数，需要在请求时给page参数加1做对齐
• 如果需要支持排序、筛选功能，只需要监听onOrderChange、onFilterChange事件，把对应参数追加到请求参数中，重新调用fetchPageData拉取数据即可
• 不要在data属性传入全量数据数组，服务端分页模式下仅需要传入当前页的数据集即可

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