JavaScript如何遍历DataTable所有分页的每一行数据

核心原因说明 #

只能拿到第一页数据的问题分两种场景对应不同原因：

• 开启了serverSide: true服务端分页：该模式下前端仅存储当前页加载的10条数据，其余分页数据不会拉取到本地，自然无法直接遍历到。
• 客户端分页（默认模式，serverSide: false）：table.rows().every()本身默认就是遍历全量行的，拿不到数据基本是实例获取错误，或者误把遍历DOM节点和遍历数据源行搞混了——非当前页的行不会渲染在DOM中，用jQuery选择器选tr永远只能拿到当前页内容。

分场景实现代码 #

场景1：客户端分页（全量数据已加载到前端） #

先排查实例初始化问题：不要重复调用$('#table').DataTable()创建新实例，已经初始化过的表格直接复用实例即可，重复初始化会导致拿到的实例数据异常。
正确遍历写法：

function loopThroughRows() {
    // 先判断表格是否已初始化，避免拿到无效实例
    if (!$.fn.dataTable.isDataTable('#table')) return;
    const table = $('#table').DataTable();

    // 无参数调用rows()会选中所有数据源中的行，不受分页、筛选状态影响
    table.rows().every(function (rowIndex) {
        const rowData = this.data(); // 此处可拿到每一行的全量数据，无论属于哪个分页
        console.log('第' + rowIndex + '行数据：', rowData);
        
        // 注意：非当前页的行未渲染到DOM，调用this.node()会返回null
        // 如果需要操作非当前行DOM，需要先跳转到对应分页再操作
    });
}

场景2：服务端分页（serverSide: true） #

该模式前端没有全量数据，两种可选方案：

• 单独调用后端接口拉取全量数据做处理，不依赖DataTable已加载的分页内容，性能最优。
• 必须通过DataTable实例遍历的话，用逐页跳转加载的方式实现，代码如下：

async function loopAllRowsServerSide() {
    const table = $('#table').DataTable();
    const pageInfo = table.page.info();
    const originPage = pageInfo.page;
    const allRowData = [];

    // 逐页跳转加载数据
    for (let page = 0; page < pageInfo.pages; page++) {
        // 等待页面跳转、数据渲染完成
        await new Promise(resolve => {
            table.one('draw', resolve).page(page).draw(false);
        });
        // 遍历当前页所有行
        table.rows({page: 'current'}).every(function () {
            allRowData.push(this.data());
        });
    }

    // 遍历完成后跳回初始页码，不影响用户当前浏览状态
    table.page(originPage).draw(false);
    return allRowData;
}

常见踩坑提醒 #

• 不要用$('#table tbody tr')这类原生jQuery选择器遍历行，这种方式只能选中当前页渲染在DOM里的节点，永远拿不到其他分页内容。
• 调用rows()时不要传入{page: 'current'}、{search: 'applied'}这类筛选参数，否则只会选中符合筛选条件的部分行，拿不到全量。
• 客户端分页下如果需要操作所有行的DOM，必须逐页跳转后再操作，非当前页的DOM节点默认不存在。

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