如何将jQuery Datatable的全部分页记录转换为JSON格式

你当前的代码是直接读取页面DOM中的<tbody>行元素，而jQuery Datatable开启分页时，仅会把当前页的行渲染到DOM树中，非当前页的行数据仅存储在Datatable的内部缓存里，所以只能拿到单页的10条记录。

方案1：直接调用Datatable原生API（最推荐，性能最高） #

Datatable本身提供了获取全量数据的API，不需要自行遍历DOM处理表头和行数据，代码如下：

// 获取Datatable实例，如果你初始化时已经定义了实例变量可以直接使用
var dataTable = $('#list').DataTable();
// 指定page: 'all'参数获取所有分页的全量数据
var allRecords = dataTable.rows({ page: 'all' }).data().toArray();
// 转换为JSON字符串
var jsonResult = JSON.stringify(allRecords);
console.log('全量数据JSON：', jsonResult);

方案2：兼容原有逻辑的改造方法 #

如果你需要保留原有自定义处理表头、单元格内容的逻辑，可以只修改获取行的部分，通过Datatable API拿到所有页的行节点再处理：

function tableToJSON(tblObj){  
   var data = [];
   var $headers = $(tblObj).find("th");
   // 改动：通过Datatable API获取全量行节点，替代直接读取DOM的tbody tr
   var dtInstance = $(tblObj).DataTable();
   var $rows = $(dtInstance.rows({page: 'all'}).nodes());

   $rows.each(function(index) {
      $cells = $(this).find("td");
      data[index] = {};
      $cells.each(function(cellIndex) {
        data[index][$($headers[cellIndex]).html()] = $(this).html();
      });    
   });
  return data;
}

var myData = tableToJSON($("#list"));
console.log('2>>> ' + JSON.stringify(myData));

注意：两种方案均需要在Datatable初始化完成后执行，才能正确拿到全量数据。

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