PrimeFaces DataTable行上下移动及末行跳转下页实现问询

我来帮你完善下移按钮的逻辑，搞定当前页末行点击后跳转到下一页的需求。先看修改后的完整代码，之后我会拆解关键改动点：

downRow = function (tableWidgetVar) {
    const table = PF(tableWidgetVar);
    
    // 如果没有选中行，默认选中第一行
    if (table.selection.length === 0) {
        table.selectRow(0);
        table.originRowIndex = 0;
        return;
    }

    const currentPage = table.getPage();
    const totalPages = table.getPageCount();
    const rowsPerPage = table.cfg.rows; // 获取每页行数
    const currentRowIndex = table.originRowIndex;
    const totalRowsOnPage = table.tbody[0].childElementCount;

    // 判断是否是当前页最后一行
    if (currentRowIndex === totalRowsOnPage - 1) {
        // 当前页不是最后一页，跳转到下一页
        if (currentPage < totalPages - 1) {
            table.next(); // 跳转到下一页
            // 延迟一下确保页面渲染完成，再选中下一页的第一行
            setTimeout(() => {
                table.unselectAllRows();
                table.selectRow(0);
                table.originRowIndex = 0;
            }, 100);
        } else {
            // 已经是最后一页的最后一行，不再操作（可以加提示）
            console.log("已经是最后一行啦");
        }
    } else {
        // 普通下移逻辑，选中下一行
        const newIndex = currentRowIndex + 1;
        table.unselectAllRows();
        table.selectRow(newIndex);
        table.originRowIndex = newIndex;
    }
};

upRow = function (tableWidgetVar) {
    const table = PF(tableWidgetVar);
    const currentPage = table.getPage();
    const currentRowIndex = table.originRowIndex;
    const totalRowsOnPage = table.tbody[0].childElementCount;

    // 额外优化：第一行时跳转到上一页的最后一行
    if (currentRowIndex === 0) {
        if (currentPage > 0) {
            table.previous(); // 跳转到上一页
            setTimeout(() => {
                const lastRowIndex = table.tbody[0].childElementCount - 1;
                table.unselectAllRows();
                table.selectRow(lastRowIndex);
                table.originRowIndex = lastRowIndex;
            }, 100);
        } else {
            console.log("已经是第一行啦");
        }
    } else {
        // 普通上移逻辑
        const newIndex = currentRowIndex - 1;
        table.unselectAllRows();
        table.selectRow(newIndex);
        table.originRowIndex = newIndex;
    }
};

关键改动说明： #

• 获取分页核心信息：通过table.getPage()获取当前页码（从0开始），table.getPageCount()获取总页数，table.cfg.rows拿到每页配置的行数，这些是判断是否需要跳转的基础。
• 末行判断与跳转：当当前行索引等于当前页行数减1（也就是最后一行），并且不是最后一页时，调用table.next()跳转到下一页。
• 延迟选中行：因为分页切换后DataTable需要重新渲染行，所以用setTimeout延迟100毫秒再选中下一页的第一行，确保DOM已经更新完成。
• 边界情况处理：已经是最后一页最后一行时，做了控制台提示（你可以换成前端弹窗提示）；上移函数也额外做了第一行跳转到上一页末行的优化，提升交互体验。
• 统一维护originRowIndex：所有选中行的操作后都同步更新这个变量，确保后续操作的索引准确。

另外要注意：

• 确保你的DataTable开启了分页（设置了paginator="true"、rows属性），否则getPage()这些方法不会生效。
• 如果你的DataTable是懒加载模式，逻辑依然适用，因为table.next()会自动触发懒加载请求，setTimeout的延迟时间可以根据实际加载速度调整。

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