如何为Material-UI Data Grid手动设置分页的总行数？

你不需要关闭分页来设置总行数，只要给DataGrid开启服务器端分页模式，就能在自定义分页逻辑的同时手动指定总条数：

• 配置paginationMode="server"，告知DataGrid分页逻辑由外部控制
• 直接通过rowCount设置总条数（比如你需要的150）
• 结合page/pageSize和onPageChange/onPageSizeChange触发API请求，更新当前页数据

代码示例 #

import { useState, useEffect } from 'react';
import { DataGrid } from '@mui/x-data-grid';

function CustomPaginationGrid() {
  const [currentPage, setCurrentPage] = useState(0);
  const [currentPageSize, setCurrentPageSize] = useState(5);
  const [tableRows, setTableRows] = useState([]);
  // 手动定义总行数
  const totalRowCount = 150;

  // 分页参数变更时请求对应页数据
  useEffect(() => {
    const fetchPageData = async () => {
      // 注意：后端API的页码可能从1开始，这里根据实际情况调整
      const res = await fetch(`/your-api-endpoint?page=${currentPage + 1}&pageSize=${currentPageSize}`);
      const data = await res.json();
      setTableRows(data);
    };

    fetchPageData();
  }, [currentPage, currentPageSize]);

  return (
    <DataGrid
      rows={tableRows}
      columns={/* 你的列配置 */}
      // 开启服务器端分页
      paginationMode="server"
      // 设置总行数
      rowCount={totalRowCount}
      // 当前页索引（从0开始）
      page={currentPage}
      // 每页条数
      pageSize={currentPageSize}
      // 监听页变更事件
      onPageChange={(newPage) => setCurrentPage(newPage)}
      // 监听每页条数变更事件
      onPageSizeChange={(newSize) => setCurrentPageSize(newSize)}
      // 可选：禁用行选择（如果不需要）
      disableRowSelectionOnClick
    />
  );
}

关键说明 #

• paginationMode="server"：这是核心配置，开启后DataGrid不会自动处理分页数据，完全依赖你传入的参数渲染分页组件和条数提示（比如"显示1-5条，共150条"）
• rowCount：在服务器端模式下，这个属性可以直接生效，不需要关闭分页
• 每次分页参数变更时，调用API获取对应页的数据并更新rows，DataGrid会自动同步分页状态

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