调用Datatable.reload()后如何获取最新数据？

核心问题分析 #

• 异步请求的时序错误：调用ajax.url().load()后立刻去获取data()，此时AJAX请求还未完成，DataTables内部数据集并未更新，因此拿到的是旧数据。另外load()方法本身会自动触发表格绘制，额外调用draw()属于冗余操作。
• 重复获取实例的误区：重新执行$(myClass).DataTable()虽然会返回已存在的实例，但如果此时新数据还未加载完成，拿到的仍是未更新的旧数据集。
• ajax.reload回调的误解：回调参数里的json是服务器返回的原始数据，并非DataTables处理后的结构化数据集。如果你的表格对返回数据做了列映射、过滤等处理，就会误以为拿到的是旧数据，实际是数据格式差异导致的误解。

正确解决方法 #

方法1：在ajax.reload回调中获取处理后的新数据

提前保存初始化好的实例引用，在重载完成的回调里通过实例的data()方法获取最新数据，不要直接使用回调参数的原始JSON：

// 提前保存实例，全程复用
var dTable2 = $(myClass).DataTable();

// 修改URL并重载，回调中处理新数据
dTable2.ajax.url("newUrl.com").reload(function() {
  var latestData = dTable2.data();
  myfunc(latestData);
});

方法2：监听xhr事件获取新数据

xhr事件仅在AJAX请求完成、数据更新后触发，触发频率远低于drawCallback，更适配你的需求：

var dTable2 = $(myClass).DataTable();

// 绑定xhr事件，数据加载完成后执行
dTable2.on('xhr', function() {
  var latestData = dTable2.data();
  // 这里处理新数据
});

// 修改URL并加载数据
dTable2.ajax.url("newUrl.com").load();

方法3：全程复用同一个实例

不要在操作过程中重复调用$(myClass).DataTable()获取实例，确保所有操作都基于最初初始化的那个实例引用，避免因时序问题获取到旧数据。

你提到drawCallback里用this.api.data()能拿到新数据，是因为该回调在每次表格绘制后触发，此时数据已更新，但它会在分页、排序等操作时频繁触发。而xhr事件仅在AJAX数据加载完成时触发，更符合你的场景。

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