React MUI DataGrid 分页不起作用

Question

嗨，我有一个数据网格。

const handlePageChange = (newOffset, newLimit) => {
    setOffset(newOffset);
  };

      <DataGrid
        rows={rows}
        className="grid-container"
        columns={columns}
        hideFooter={rows?.length < 5}
        initialState={{
          pagination: {
            paginationModel: { pageSize: 5, page: 0 },
          },
        }}
        pageSizeOptions={[5, 10, 25]}
        autoHeight={false}
        autoWidth={false}
        {...rest}
        localeText={{
          noRowsLabel: (
            <Typography variant="h5" component={"h2"} fontWeight={"normal"}>
              No Data
            </Typography>
          ),
        }}
        onPaginationModelChange={(params) => {
          const newOffset = rows?.length + 1;
           handlePageChange(newOffset);
         }}
        slots={{
          toolbar: toolbar,
        }}
        loading={isLoading}
      />

这里我想做服务器端分页。我使用的限制为 5。这意味着后端只应返回 5 个对象。我还有一个名为 offset 的变量，我需要将其发送到后端，下一组数据应该来自哪个索引。

那么

我添加了

const [offset, setOffset] = useState(0);  

首先。然后，一旦用户单击下一个，我就会将前一个结果的长度添加到其中。这样它就同样变成了5。

但是这样它不起作用，当我点击返回时它也不起作用。谁能帮我解决这个问题吗？

Answer 1

DataGrid组件还需要添加一个参数，即 分页模型 paginationModel 必须是一个有两个键的对象：

{ pageSize: 5, page: current_page }

根据您的后端数据，相应地更改paginationModel中的page。