MUI分页组件：设置每页显示行数

MUI的Pagination组件本身不负责控制每页显示的行数，它只处理页码的切换逻辑。要实现每页显示10行，需要在你的业务逻辑层做处理，步骤如下：

• 定义每页条数状态
  在组件中维护一个pageSize状态，默认设为10：

  const [pageSize, setPageSize] = useState(10);
  

• 处理数据分页逻辑

  • 若为前端本地数据，直接按pageSize截取：

    const displayedData = yourData.slice(
      (props.pageNo - 1) * pageSize,
      props.pageNo * pageSize
    );
    

  • 若为后端分页，调用接口时传入pageSize参数：

    const fetchData = async () => {
      const res = await api.get('/your-data-api', {
        params: {
          page: props.pageNo,
          pageSize: pageSize
        }
      });
      // 处理接口返回的数据
    };
    

• 更新总页数计算逻辑
  总页数需要根据总数据量和pageSize重新计算，确保Pagination组件的count属性正确：

  const totalPages = Math.ceil(totalDataCount / pageSize);
  

• 保持Pagination组件原有配置
  原组件不需要额外修改属性，它只需要获取正确的总页数和当前页码即可：

  <Pagination
    count={totalPages}
    page={props.pageNo}
    onChange={props.handleClick}
  />
  

简单来说，Pagination只是页码导航控件，每页显示多少条数据的逻辑完全由你的业务代码控制，和组件本身无关。

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