如何为自定义分页添加每页行数选择功能？

步骤1：添加每页行数状态与处理逻辑 #

在组件中新增状态管理每页行数，同时定义可选行数和对应的处理函数：

const { customers, isError, message, meta } = useSelector(
    (store) => store.customer
);

const pageNum = [];
for (let i = 1; i <= meta.lastPage; i++) {
    pageNum.push(i)
}
const [page, setPage] = useState(1);
// 新增每页行数状态，默认设为20
const [perPage, setPerPage] = useState(20);
// 定义可选的每页行数选项
const perPageOptions = [20, 30];

const onChange = (e) => {setPage(parseInt(e.target.value));};

// 处理每页行数变化的函数
const handlePerPageChange = (e) => {
  const newPerPage = parseInt(e.target.value);
  setPerPage(newPerPage);
  setPage(1); // 切换行数时重置到第一页，避免无数据异常
  // 调用Redux action，传入新的perPage和page=1，重新获取对应分页数据
  // 示例：dispatch(fetchCustomers({ page: 1, perPage: newPerPage }));
};

步骤2：更新UI区域，加入每页行数选择器 #

修改底部的分页控制区域，新增每页行数的下拉选择器，并更新记录数显示文本：

<Flex justifyContent='space-between' alignItems='center' mt='20px'>
  {/* 更新记录范围显示，根据当前页和每页行数计算起始/结束记录 */}
  <Text>Showing {((page - 1) * perPage) + 1} to {Math.min(page * perPage, meta.total)} of {meta.total} Records</Text>
  <Text>page: {meta.currentPage}</Text>
  {/* 原有页码选择器 */}
  <Select w='70px' onChange={onChange} value={page} name='page'>
    {pageNum.map(a => <option key={a} value={a}>{a}</option>)}
  </Select>
  {/* 新增每页行数选择器 */}
  <Select w='70px' onChange={handlePerPageChange} value={perPage} name='perPage' ml='10px'>
    {perPageOptions.map(num => <option key={num} value={num}>{num}</option>)}
  </Select>
</Flex>

步骤3：同步后端请求逻辑 #

确保Redux的请求action在发起时，将page和perPage作为参数传递给后端，后端根据这两个参数返回对应分页的数据及更新后的meta信息（比如lastPage会根据总记录数和新的perPage重新计算），这样页码数组pageNum会自动适配新的分页总数。

关键注意点 #

• 切换每页行数时必须重置页码到第一页，避免出现当前页无数据的情况
• 保持前端perPage状态与后端返回的meta.perPage一致，防止显示混乱
• 如果有搜索过滤逻辑，切换行数时需携带搜索参数一起请求后端

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