jQuery DataTable重载后返回倒数第二行而非最后一行问题求助

我之前也碰到过一模一样的情况，问题出在你依赖的回调时机上——虽然ajax.reload()的请求完成了，但DataTables还没彻底完成表格的重绘和DOM更新，这时候去取row(':last')拿到的其实是旧DOM里的行数据。

问题根源 #

myDataTable.ajax.reload(null, false)里的第二个参数false会让表格重置回第一页，但更关键的是：ajax.reload()返回的jqXHR对象的done回调，是在ajax请求完成、数据被DataTables接收后触发，但这时候表格的DOM节点还没完成更新。你这时候获取的最后一行，其实是插入新数据前的倒数第二行。

解决方案 #

改用监听DataTables的draw.dt事件，这个事件会在表格完成所有重绘操作（包括数据加载、DOM更新、分页调整等）后触发，能确保你拿到的是最新的表格数据：

// 触发表格重载
myDataTable.ajax.reload(null, false);

// 监听draw事件，用one()确保只执行一次，避免重复绑定
myDataTable.one('draw.dt', function() {
  var last_row = myDataTable.row(':last').data();
  console.log(last_row);
});

额外注意点 #

如果你的表格开启了分页功能，还要确认新插入的数据是否在当前显示的分页中：如果新数据在最后一页，而ajax.reload(null, false)让表格回到了第一页，那row(':last')拿到的会是第一页的最后一行。这种情况下，你需要先跳转到最后一页再获取数据：

myDataTable.one('draw.dt', function() {
  // 跳转到最后一页
  myDataTable.page('last').draw('page');
  // 再次监听draw事件，确保分页跳转完成
  myDataTable.one('draw.dt', function() {
    var last_row = myDataTable.row(':last').data();
    console.log(last_row);
  });
});

这样就能稳稳获取到最新插入的那一行数据了。

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