1: 創(chuàng)建nextjs項(xiàng)目
npx create-next-app@latest
2:安裝 datagrid 相關(guān)包參考鏈接 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);
//點(diǎn)擊下一頁觸發(fā)加載數(shù)據(jù)
},[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版本分頁觸發(fā)直接寫在useeffect方法中映跟，沒有直接暴露在datagrid屬性中
