WordPress中如何用JavaScript获取TablePress分页表格的所有行？

TablePress的分页功能基于DataTables实现，非当前页的行不会渲染在DOM中，直接通过document.getElementById('table-1').rows只能获取当前页的行数据，这就是你遇到的问题根源。要处理所有分页的行，需要使用DataTables的官方API来操作完整的表格数据集。

解决方案代码 #

// 绑定按钮点击事件（替换#your-filter-button为你的按钮ID）
document.querySelector('#your-filter-button').addEventListener('click', function() {
    // 获取TablePress表格对应的DataTables实例
    const table = $('#table-1').DataTable();
    
    // 获取所有分页的行数据（包含未渲染到DOM的行）
    const allRows = table.rows().data();
    
    // 遍历所有行执行过滤操作
    allRows.each(function(rowData, rowIndex) {
        // rowData是行数据数组，索引1对应第二列（与你原代码的cells[1]对应）
        const available = rowData[1];
        if (available === "True") {
            console.log("符合条件的行索引:", rowIndex);
            
            // 若需要操作该行的DOM元素（比如添加高亮样式），可通过以下方式获取
            const rowElement = table.row(rowIndex).node();
            rowElement.classList.add('matched-row');
        }
    });
});

关键说明 #

• 依赖确认：确保你的TablePress表格已启用「使用DataTables」选项（在TablePress表格编辑页面的「Features」设置中开启），否则无法调用DataTables API。
• 原生JS替代：若不想使用jQuery，可改用原生JS获取DataTables实例：

  const table = document.getElementById('table-1').DataTable();
  

• 执行时机：按钮点击事件触发时表格已完成初始化，无需额外等待加载。

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