1: 创建nextjs项目

npx create-next-app@latest

2:安装 datagrid 相关包参考链接 datagrid=7.6.1

npm install @mui/x-data-grid

3:在页面写上表格分页代码

'use client'
import React,{useEffect,useState} from "react";

import Button from '@mui/material/Button';
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
import type { GridPaginationMeta } from '@mui/x-data-grid';
import { createFakeServer } from '@mui/x-data-grid-generator';

const SERVER_OPTIONS = {
  useCursorPagination: false,
};

const { useQuery, ...data } = createFakeServer({ rowLength: 1000 }, SERVER_OPTIONS);

export default function Home() {

  const apiRef = useGridApiRef();
  const [paginationModel, setPaginationModel] = React.useState({
    page: 0,
    pageSize: 50,
  });

  const {
    isLoading,
    rows,
    pageInfo: { hasNextPage },
  } = useQuery(paginationModel);

  
 

  useEffect(() =>{


    console.log("paginationModel==page",paginationModel.page);
    console.log("paginationModel==pageSize",paginationModel.pageSize);

    //点击下一页触发加载数据
    
  },[paginationModel])


  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24 bg-white">
          
      <div style={{ height: 700,width: '100%'  }}>
        <DataGrid
          
          rows={rows}
          {...data}
          initialState={{ ...data.initialState, pagination: { rowCount: -1 } }}
          estimatedRowCount={100}
          
          loading={isLoading}
          pageSizeOptions={[10, 25, 50, 100]}
          paginationModel={paginationModel}
          paginationMode="server"
          onPaginationModelChange={setPaginationModel}
        />
      </div>
    </main>
  );
}

7.x版本分页触发直接写在useeffect方法中，没有直接暴露在datagrid属性中

github代码链接