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属性中
