如何在Material UI X-Grid中获取过滤后的行数？

你的思路方向是完全正确的，但核心问题在于筛选后的总行数必须由后端接口返回——因为你开启了服务器端分页（paginationMode="server"），前端无法获取到完整的筛选后数据集，自然没法自行计算总行数。下面一步步给你梳理解决方案：

1. 调整后端接口返回结构 #

当你发送筛选条件到后端时，接口需要返回两个核心数据：

• 当前页的筛选后数据（rows）
• 筛选后的总行数（比如命名为totalFiltered）
• （可选）未筛选时的原始总行数（totalOriginal）

只有拿到后端返回的筛选后总行数，前端才能给XGrid传递准确的rowCount值。

2. 前端维护对应状态 #

在组件中添加几个状态来跟踪关键数据：

const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [rows, setRows] = useState([]);
// 未筛选时的原始总行数
const [serverRowCount, setServerRowCount] = useState(60);
// 筛选后的总行数
const [filteredRowCount, setFilteredRowCount] = useState(60);
// 标记是否有激活的筛选条件
const [hasActiveFilters, setHasActiveFilters] = useState(false);

3. 实现动态rowCount逻辑 #

你之前的伪代码可以改成基于状态的计算，直接在XGrid的props中使用三元表达式，或者封装成函数：

// 方式1：直接在props中写
<XGrid
  pageSize={pageSize}
  page={page}
  rowsPerPageOptions={[25, 50, 100]}
  rowCount={hasActiveFilters ? filteredRowCount : serverRowCount}
  onPageChange={onHandlePageChange}
  onPageSizeChange={onHandlePageSizeChange}
  rows={rows}
  columns={columns}
  paginationMode="server"
  pagination
  disableColumnResize={true}
  hideFooterSelectedRowCount={true}
/>

// 方式2：封装成函数（如果后续逻辑更复杂的话）
const getRowCount = () => {
  return hasActiveFilters ? filteredRowCount : serverRowCount;
};

4. 处理筛选触发的逻辑 #

当用户设置筛选条件时，你需要：

1. 重置页码为第一页（避免筛选后页码超出数据范围）
2. 携带筛选条件调用后端接口
3. 更新rows、filteredRowCount和hasActiveFilters状态

示例代码：

const handleFilterChange = (newFilters) => {
  // 重置页码到第一页
  setPage(0);
  // 标记是否有激活的筛选条件
  setHasActiveFilters(Object.keys(newFilters).length > 0);
  
  // 调用后端接口，携带筛选条件、页码、每页条数
  fetch(`/api/data?page=${0}&pageSize=${pageSize}&filters=${JSON.stringify(newFilters)}`)
    .then(res => res.json())
    .then(data => {
      setRows(data.rows);
      setFilteredRowCount(data.totalFiltered);
    });
};

关于你之前尝试的问题解释 #

• 移除rowCount属性：XGrid会默认使用初始的服务器端总行数，所以筛选后还是显示原来的60条，而且页码不会重置——因为组件不知道总条数已经变了，自然无法回到第一页。
• 改成client模式：服务器端只返回了第一页的筛选后数据，客户端没有拿到完整的筛选后数据集，所以只能显示第一页，分页功能也无法正常工作（客户端分页需要所有数据在前端）。

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