MUI DataGrid paginationMeta.hasNextPage不生效，如何控制下一页按钮状态？

DevOps 小满

2026-6-21

问题原因与解决方案

你遇到的问题核心是**rowCount={-1}的配置导致DataGrid忽略了paginationMeta的设置**。当rowCount设为-1时，DataGrid会默认认为数据是无限的，因此始终激活「下一页」按钮，无视hasNextPage: false的配置。

修复步骤

1. 替换`rowCount`的取值

在服务端分页模式下，rowCount必须设置为实际的总记录数（如果后端接口返回），或者基于当前页数据和分页状态估算一个合理值，绝对不能设为-1。

情况1：后端返回总记录数

如果你的接口会返回总条数（比如totalRows），直接传入该值：

return (
  <DataGrid 
    rows={rows} 
    columns={rfqCols}
    paginationModel={paginationModel}
    paginationMeta={{ hasNextPage: false }}       
    sortingMode="server"
    paginationMode="server"
    onPaginationModelChange={handlePaginationModelChange}
    onSortModelChange={handleSortModelChange}
    rowCount={totalRows} // 替换为后端返回的总记录数
    pageSizeOptions={[1,3,5]}
  />
);

情况2：后端仅返回是否有下一页

如果接口不返回总条数，只告诉你是否有下一页，可以通过当前页数据量和分页参数估算rowCount：

// 计算逻辑：当前页起始位置 + 当前页数据量 + (有下一页则追加一页容量，否则0)
const calculatedRowCount = (paginationModel.page * paginationModel.pageSize) + rows.length + (false ? paginationModel.pageSize : 0);

return (
  <DataGrid 
    rows={rows} 
    columns={rfqCols}
    paginationModel={paginationModel}
    paginationMeta={{ hasNextPage: false }}       
    sortingMode="server"
    paginationMode="server"
    onPaginationModelChange={handlePaginationModelChange}
    onSortModelChange={handleSortModelChange}
    rowCount={calculatedRowCount}
    pageSizeOptions={[1,3,5]}
  />
);