如何获取bootstrap4中带分页的datatable表格的所有行数据

这是DataTables组件的正常表现：开启分页功能后，插件只会将当前页的行元素挂载到页面DOM树中，非当前页的所有数据仅存储在插件内部缓存里，所以不管用原生JS还是jQuery直接读取DOM，都只能获取到当前可见页的行数据。

直接调用DataTables官方提供的实例API即可获取全量数据，不需要操作DOM：

• 第一步：先获取DataTables实例
  如果你初始化时没有保存实例，可通过以下方式获取：
  const table = $('#myTable').DataTable();
  注意：此处调用的是大写D开头的DataTable()方法，小写开头的方法返回的是jQuery对象，无法调用DataTables原生API

• 不同场景的获取方法：

  1. 获取所有行的原始数据源
     如果你只需要行内的业务数据，不需要操作DOM节点，用这个方法即可：

     // 调用toArray()转换为普通数组方便操作
     const allData = table.rows().data().toArray();
     

  2. 获取所有行的DOM节点
     如果你需要操作<tr>元素的属性、样式等，可通过以下方式获取全量行节点：

     const allRowNodes = table.rows().nodes().toArray();
     // 示例：遍历所有行读取第一列内容
     allRowNodes.forEach(tr => {
       console.log(tr.cells[0].textContent.trim());
     })
     

  3. 获取符合筛选条件的行
     如果你只需要获取选中行、或符合某类选择器的行，可在rows()方法中传入筛选参数，例如获取所有添加了selected类的行：

     const selectedRows = table.rows('.selected').data().toArray();
     

所有涉及DataTables数据读取、修改的操作都建议走官方API，避免因为分页、排序、前端筛选等功能导致读取的数据和实际存储的数据不一致。

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