如何重新加载DataTables而不隐藏Bootstrap模态框？

这个问题其实很常见——当你调用$('#mytable').DataTable().ajax.reload();时，DataTable会完全重绘整个表格的DOM结构，原来的子行、模态框这些元素都会被移除并重新创建，所以打开的模态框自然就消失了。这里有几个可行的解决方案，你可以根据自己的场景选择：

方案一：记录状态并在重绘后恢复 #

如果不想改变现有模态框的结构，可以在重新加载前记录当前打开的模态框信息，等表格重绘完成后再恢复状态。需要注意的是，模态框在子行里，所以还要确保对应的子行重新展开：

// 记录当前打开的模态框和对应的行ID
let openModalId = null;
let targetRowId = null;

const activeModal = $('.modal.show');
if (activeModal.length > 0) {
  openModalId = activeModal.attr('id');
  // 假设你的模态框ID格式是`modal-{rowId}`，提取出行ID
  targetRowId = openModalId.split('-')[1];
}

// 重新加载表格，第二个参数false表示不重置分页
$('#mytable').DataTable().ajax.reload(function() {
  if (targetRowId && openModalId) {
    // 找到对应的行并展开子行
    const targetRow = $('#mytable').DataTable().row(`#row-${targetRowId}`); // 假设行的ID是`row-{rowId}`
    if (targetRow.length) {
      targetRow.child.show();
      // 子行展开后重新打开模态框
      $(`#${openModalId}`).modal('show');
    }
  }
}, false);

这个方案的缺点是依赖DOM元素的ID命名规则，而且如果表格数据变化较大，可能会出现匹配不到行的情况。

方案二：将模态框移出表格DOM（推荐） #

更好的做法是把模态框放在表格的外部，作为页面的独立元素，点击子行按钮时动态填充模态框内容。这样表格重绘时不会影响模态框，从根源上解决问题：

首先在页面的body末尾添加通用模态框（不要放在表格或子行模板里）：

<div class="modal fade" id="rowDetailsModal" tabindex="-1" role="dialog" aria-labelledby="rowDetailsModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="rowDetailsModalLabel">行详情</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modalContent">
        <!-- 内容会动态填充 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存修改</button>
      </div>
    </div>
  </div>
</div>

然后修改子行按钮的点击事件，动态填充并打开模态框：

// 监听子行里的打开模态框按钮（假设按钮有类名`open-details-modal`，并通过data-id存储行ID）
$('#mytable').on('click', '.open-details-modal', function() {
  const rowId = $(this).data('id');
  // 获取当前行的DataTable数据
  const rowData = $('#mytable').DataTable().row($(this).closest('tr')).data();
  
  // 填充模态框内容，这里根据你的数据结构调整
  $('#rowDetailsModalLabel').text(`ID: ${rowId} 的详情`);
  $('#modalContent').html(`
    <div class="form-group">
      <label>名称</label>
      <input type="text" class="form-control" value="${rowData.name}">
    </div>
    <div class="form-group">
      <label>邮箱</label>
      <input type="email" class="form-control" value="${rowData.email}">
    </div>
    <!-- 其他需要展示的字段 -->
  `);
  
  // 打开模态框
  $('#rowDetailsModal').modal('show');
});

这个方案结构更清晰，维护性更强，而且完全避免了表格重绘对模态框的影响。

方案三：只更新特定行而非全表重载 #

如果你的数据更新只是针对个别行，不需要全表重新加载，可以使用row().invalidate()方法只更新目标行，这样不会影响其他行的DOM（包括打开的模态框）：

// 假设你要更新ID为123的行
const targetRow = $('#mytable').DataTable().row(`#row-123`);
if (targetRow.length) {
  // 从服务器获取该行的最新数据
  $.get('/api/get-row-data', { id: 123 }, function(newData) {
    // 更新行数据并局部重绘
    targetRow.data(newData).invalidate().draw(false);
  });
}

这个方案适合局部数据更新的场景，性能也更好。

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