PrimeReact分页器PageLinks失效问题求助

核心原因 #

分页按钮看似禁用、无法点击，本质是DataTable未获取到正确的总记录数，也未绑定分页状态的更新回调。PrimeReact需要总记录数来判断分页按钮的启用/禁用逻辑，同时依赖回调更新分页状态，否则点击按钮不会触发任何行为。

具体修复步骤 #

1. 给DataTable添加totalRecords属性

这是解决问题的关键，DataTable需要总记录数计算总页数，才能正确启用分页按钮：

// 先将sessionStorage中的TotalRows转为数字，避免字符串计算错误
const totalRows = Number(sessionStorage.getItem("TotalRows")) || 0;

<DataTable className="gridfont"
    value={filtercontry}
    paginator
    rows={perPage}                
    rowsPerPageOptions={[10, 20, 30, 40, 50, 100]}
    paginatorTemplate={template1}
    // 新增：传递总记录数
    totalRecords={totalRows}
    // 新增：绑定分页状态及更新回调
    first={first}
    onPageChange={(e) => {
        setFirst(e.first);
        // 同步维护从1开始的页码状态（用于自定义跳转输入框）
        setPage(e.page + 1);
    }}
/>

2. 定义分页状态变量

在组件中添加分页相关的状态，用于跟踪当前分页位置：

import { useState } from 'react';

// first：当前页第一条数据的索引（从0开始）
// page：从1开始的页码（适配自定义跳转输入框的习惯）
// perPage：每页显示条数（若未定义需补充状态）
const [first, setFirst] = useState(0);
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(10);

3. 修复自定义跳转输入框逻辑

确保输入框绑定正确的页码状态，且跳转时同步更新分页位置：

// 输入框内容变化时更新页码状态
const handleGoToPageChange = (value) => {
    // 校验输入：仅保留数字，避免无效值
    const validPage = value.replace(/\D/g, '');
    setPage(Number(validPage) || 1);
};

// 回车或点击GO按钮时执行跳转
const onPageInputKeyDown = (e, options) => {
    if (e.key === 'Enter' || e.target.id === 'search-button') {
        const totalPages = Math.ceil(totalRows / perPage);
        // 确保页码在有效范围内（1到总页数）
        const targetPage = Math.max(1, Math.min(page, totalPages));
        // 计算对应起始索引
        const targetFirst = (targetPage - 1) * perPage;
        setFirst(targetFirst);
    }
};

// 自定义模板中InputText的value绑定page状态
<InputText size="2" className="ml-1" value={page}
    maxLength={Math.ceil(totalRows / perPage).toString()}
    tooltip={pageInputTooltip}
    onKeyDown={(e) => onPageInputKeyDown(e, options)}
    onChange={(e) => handleGoToPageChange(e.target.value)} />

4. 排查sessionStorage数据有效性

确保sessionStorage.getItem("TotalRows")返回的是有效数字字符串，避免出现NaN：

// 可添加日志排查数据是否正确
console.log('Total rows from sessionStorage:', sessionStorage.getItem("TotalRows"));
console.log('Parsed total rows:', totalRows);

额外注意点 #

• 不要直接在模板中重复读取sessionStorage，建议提前取出并转为数字，避免类型错误和重复IO。
• 确保filtercontry是当前页的数据集，而非全部数据，否则分页逻辑会混乱。

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