Material UI 的 Data Grid 组件是一个强大的数据展示工具，提供了丰富的功能，其中分页功能尤为重要。分页可以有效地处理大量数据，使得用户体验更加流畅。在本篇博客中，我们将详细探讨 Data Grid 中的分页功能，包括如何启用分页、配置分页选项、处理分页事件以及与其他组件的结合使用。我们还将提供详细的示例代码以便于理解。

1. 安装 MUI X Data Grid

确保你已经安装了所需的 MUI 组件包：

npm install @mui/material @emotion/react @emotion/styled @mui/x-data-grid

2. 基本的 Data Grid 分页设置

2.1 初始化 Data Grid

首先，我们需要创建一个基础的 Data Grid，并启用分页功能。分页功能可以通过 pageSize 属性来设置。

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
];

const rows = [
  { id: 1, name: 'John Doe', age: 35 },
  { id: 2, name: 'Jane Smith', age: 42 },
  { id: 3, name: 'Mike Johnson', age: 28 },
  { id: 4, name: 'Alice Brown', age: 31 },
  { id: 5, name: 'Bob White', age: 27 },
  { id: 6, name: 'Charlie Green', age: 30 },
  { id: 7, name: 'David Black', age: 40 },
  { id: 8, name: 'Eve White', age: 29 },
];

const PaginationDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5, 10, 20]}
        pagination
      />
    </div>
  );
};

export default PaginationDataGrid;

3. 分页配置选项

3.1 配置 pageSize 和 rowsPerPageOptions

在上面的代码中，pageSize 属性控制了每页显示的行数，而 rowsPerPageOptions 属性则定义了用户可以选择的行数选项。这使得用户可以根据自己的需求进行分页选择。

3.2 处理分页事件

你可以使用 onPageChange 和 onPageSizeChange 事件处理程序来监听分页的变化。这可以帮助你在分页变化时更新数据或执行其他操作。

const PaginationDataGrid = () => {
  const [page, setPage] = React.useState(0);
  const [pageSize, setPageSize] = React.useState(5);

  const handlePageChange = (newPage) => {
    setPage(newPage);
  };

  const handlePageSizeChange = (newPageSize) => {
    setPageSize(newPageSize);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        page={page}
        pageSize={pageSize}
        onPageChange={handlePageChange}
        onPageSizeChange={handlePageSizeChange}
        rowsPerPageOptions={[5, 10, 20]}
        pagination
      />
    </div>
  );
};

4. 使用服务器端分页

在处理大量数据时，可能需要使用服务器端分页。这种方式可以有效减少前端数据加载时间，提高性能。以下是如何实现服务器端分页的示例：

4.1 服务器端分页示例

假设我们有一个 API，可以返回分页数据。我们可以使用 useEffect 钩子来从服务器获取数据。

const PaginationDataGrid = () => {
  const [rows, setRows] = React.useState([]);
  const [page, setPage] = React.useState(0);
  const [pageSize, setPageSize] = React.useState(5);
  const [totalRows, setTotalRows] = React.useState(0);

  React.useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data?page=${page + 1}&pageSize=${pageSize}`);
      const data = await response.json();
      setRows(data.rows);
      setTotalRows(data.total);
    };

    fetchData();
  }, [page, pageSize]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pagination
        page={page}
        pageSize={pageSize}
        onPageChange={(newPage) => setPage(newPage)}
        onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
        rowCount={totalRows}
        paginationMode="server"
        rowsPerPageOptions={[5, 10, 20]}
      />
    </div>
  );
};

4.2 API 示例数据格式

确保你的 API 返回的数据格式如下：

{
  "total": 100,
  "rows": [
    { "id": 1, "name": "John Doe", "age": 35 },
    { "id": 2, "name": "Jane Smith", "age": 42 },
    ...
  ]
}

5. 自定义分页组件

你还可以自定义分页组件以适应特定的设计需求。以下是一个自定义分页的示例。

5.1 自定义分页组件示例

import { DataGrid, GridPagination } from '@mui/x-data-grid';

const CustomPagination = (props) => {
  return (
    <GridPagination
      {...props}
      rowsPerPageOptions={[5, 10, 20]}
      labelRowsPerPage="每页行数:"
      labelDisplayedRows={({ from, to, count }) => `${from} - ${to} / ${count}`}
    />
  );
};

const PaginationDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        components={{
          Pagination: CustomPagination,
        }}
      />
    </div>
  );
};

6. 分页与其他组件的结合使用

6.1 结合选择框使用

你可以将选择框与分页结合使用，让用户选择要显示的行数。

const PaginationDataGridWithSelect = () => {
  const [pageSize, setPageSize] = React.useState(5);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <select onChange={(e) => setPageSize(Number(e.target.value))} value={pageSize}>
        <option value={5}>5</option>
        <option value={10}>10</option>
        <option value={20}>20</option>
      </select>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={pageSize}
        rowsPerPageOptions={[5, 10, 20]}
        pagination
      />
    </div>
  );
};

7. 完整示例

以下是一个完整的分页示例，结合了所有前面的部分：

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
];

const rows = [
  { id: 1, name: 'John Doe', age: 35 },
  { id: 2, name: 'Jane Smith', age: 42 },
  { id: 3, name: 'Mike Johnson', age: 28 },
  { id: 4, name: 'Alice Brown', age: 31 },
  { id: 5, name: 'Bob White', age: 27 },
  { id: 6, name: 'Charlie Green', age: 30 },
  { id: 7, name: 'David Black', age: 40 },
  { id: 8, name: 'Eve White', age: 29 },
];

const PaginationDataGrid = () => {
  const [pageSize, setPageSize] = React.useState(5);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <select onChange={(e) => setPageSize(Number(e.target.value))} value={pageSize}>
        <option value={5}>5</option>
        <option value={10}>10</option>
        <option value={20}>20</option>
      </select>


      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={pageSize}
        rowsPerPageOptions={[5, 10, 20]}
        pagination
      />
    </div>
  );
};

export default PaginationDataGrid;

8. 总结

Material UI 的 Data Grid 分页功能为数据管理提供了灵活的解决方案。通过简单的配置，你可以轻松启用和定制分页选项。同时，结合服务器端分页和自定义组件的使用，可以满足不同场景下的需求。

希望通过本篇博客的介绍和示例，你能够充分利用 Data Grid 的分页功能，实现更好的用户体验。如果你有任何问题或建议，欢迎在评论区留言！