React中Grid.js自定义分页及总页数显示实现求助

核心思路 #

要实现你需要的分页效果，关键是利用Grid.js的服务端分页模式实现按需加载，同时配置总条目数让Grid.js自动计算总页数，再自定义分页底部的显示文本和控件样式。

步骤实现 #

1. 安装依赖

确保已安装Grid.js的React包：

npm install grid-react
# 或者
yarn add grid-react

2. 编写React组件

以下是完整的组件示例，包含按需加载、自定义分页文本和总页数显示：

import { useState, useEffect } from 'react';
import { Grid, GridLoader } from 'grid-react';
import 'grid-react/dist/theme/mermaid.css';

const CustomPaginationGrid = () => {
  // 分页状态管理
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 10;
  const totalEntries = 1000; // 总条目数，真实场景可从接口动态获取
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  // 按需加载当前页数据
  const fetchPageData = async () => {
    setLoading(true);
    const startIndex = (currentPage - 1) * pageSize;
    
    // 👇 替换为你的真实接口请求
    // const response = await fetch(`/api/your-data?page=${currentPage}&size=${pageSize}`);
    // const result = await response.json();
    // setData(result.data);

    // 模拟接口返回数据
    const mockData = Array.from({ length: pageSize }, (_, idx) => [
      `条目 ${startIndex + idx + 1}`,
      `这是第${startIndex + idx + 1}条数据的描述`
    ]);
    setData(mockData);
    setLoading(false);
  };

  // 初始加载与分页切换时重新请求数据
  useEffect(() => {
    fetchPageData();
  }, [currentPage]);

  return (
    <Grid
      columns={['序号', '描述']}
      data={data}
      loading={<GridLoader />}
      // 服务端分页核心配置
      server={{
        // 分页切换时触发，接收page/limit参数
        url: (params) => {
          setCurrentPage(params.page);
          return Promise.resolve({ data });
        },
        total: totalEntries // 关键：设置总条目数，Grid.js自动计算总页数
      }}
      // 自定义分页控件
      pagination={{
        enabled: true,
        limit: pageSize, // 固定每页10条
        // 自定义底部显示文本
        summary: ({ from, to, total }) => 
          `showing ${from} to ${to} of ${total} entries`,
        // 配置分页按钮样式
        buttons: {
          showPrev: true,
          showNext: true,
          maxVisible: 5, // 显示5个连续页码，超出自动显示省略号
          showFirst: false,
          showLast: false
        }
      }}
    />
  );
};

export default CustomPaginationGrid;

关键配置说明 #

• server.total: 必须设置为总条目数（此处为1000），Grid.js会根据limit（10）自动计算出总页数（100），并在分页控件末尾显示最后一页按钮和省略号。
• pagination.summary: 完全自定义底部文本，替换Grid.js默认显示内容。
• server.url: 分页切换时触发的回调，获取当前点击的页码，更新状态后重新加载对应页数据，实现按需加载。
• pagination.buttons.maxVisible: 控制连续显示的页码数量，设置为5即可实现Prev. 1 2 3 4 5 … 100 Next的样式。

真实接口适配 #

如果接口返回包含总条目数的分页数据，可动态设置totalEntries：

// 假设接口返回格式为 { data: [...], total: 1000 }
const response = await fetch(`/api/your-data?page=${currentPage}&size=${pageSize}`);
const result = await response.json();
setData(result.data);
setTotalEntries(result.total); // 动态更新总条目数

内容的提问来源于stack exchange，提问作者amritkv88