jQuery DataTable数据更新后详情行切换功能异常求助

看起来你遇到的问题核心在于draw事件中通过模拟点击来恢复展开状态，导致行的展开/收起状态被重复切换，加上自定义的detailRows数组和DataTable内部状态不同步，才会出现奇偶次刷新功能交替正常/失效的情况。

问题分析 #

每次DataTable触发draw事件（比如更新数据后），你通过trigger('click')来重新展开之前的行，但这个操作会完整执行你的点击逻辑：不仅会显示子行，还会修改detailRows数组。当数据刷新后，DataTable可能会重新渲染DOM行，原来的行对象和新渲染的行对象虽然ID相同，但内部状态已经脱节，导致row.child.isShown()的判断出现异常，加上重复触发点击导致状态被翻转多次，就出现了你看到的“同时执行if和else分支”的情况。

解决方案 #

我们需要修改draw事件的处理逻辑，直接通过DataTable的API来恢复子行状态，而不是模拟点击，同时优化状态跟踪的方式：

1. 缓存DataTable实例，避免重复获取

首先把table实例缓存起来，不要在click事件里每次都重新获取：

// 初始化时就获取并缓存table实例
var table = $('#alertTable').DataTable();
var detailRows = [];

2. 修改draw事件逻辑，直接渲染子行

去掉模拟点击的操作，直接遍历detailRows，找到对应的行并渲染子行：

table.on('draw', function () {
  // 先清空所有可能的子行，避免重复渲染
  table.rows().child.hide();
  $('.details').removeClass('details');
  
  $.each(detailRows, function (i, id) {
    var tr = $('#' + id);
    if (tr.length) {
      var row = table.row(tr);
      // 直接显示子行，不需要触发点击
      tr.addClass('details');
      row.child(format(row.data())).show();
    }
  });
});

3. 优化点击事件中的状态判断

确保点击事件里的逻辑和detailRows数组同步，同时避免重复操作：

$('#alertTable tbody').on('click', 'tr td.details-control', function (e) {
  e.preventDefault();
  var tr = $(this).closest('tr');
  var row = table.row(tr);
  var idx = $.inArray(tr.attr('id'), detailRows);
  
  if (row.child.isShown()) {
    console.log('True...');
    tr.removeClass('details');
    row.child.hide();
    // 从数组中移除时要确保存在
    if (idx !== -1) {
      detailRows.splice(idx, 1);
    }
  } else {
    console.log('False...');
    tr.addClass('details');
    row.child(format(row.data())).show();
    if (idx === -1) {
      detailRows.push(tr.attr('id'));
    }
  }
});

4. 可选：改用DataTable的row().child()状态跟踪（更可靠）

如果你不想维护自己的detailRows数组，可以直接通过DataTable的API来跟踪所有展开的行：

// 移除detailRows数组
table.on('draw', function () {
  // 获取所有之前展开的行（通过row().child().isShown()判断）
  table.rows().every(function () {
    if (this.child.isShown()) {
      this.child.hide();
      $(this.node()).removeClass('details');
      // 重新渲染子行
      $(this.node()).addClass('details');
      this.child(format(this.data())).show();
    }
  });
});

// 点击事件也简化：
$('#alertTable tbody').on('click', 'tr td.details-control', function (e) {
  e.preventDefault();
  var tr = $(this).closest('tr');
  var row = table.row(tr);
  
  if (row.child.isShown()) {
    tr.removeClass('details');
    row.child.hide();
  } else {
    tr.addClass('details');
    row.child(format(row.data())).show();
  }
});

为什么这样能解决问题？ #

• 不再通过模拟点击来恢复状态，避免了重复触发状态翻转的逻辑
• 直接通过DataTable的API操作子行，确保内部状态和DOM同步
• 缓存table实例，避免每次点击都重新初始化，提升性能同时避免状态混乱

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