DataTable中表单提交按钮在IE11失效（DataTable兼容Bug）

我之前也碰到过一模一样的问题！IE11对formaction属性的支持存在局限性，再加上DataTables初始化时会重新构建表格DOM结构，很容易破坏按钮和表单的原生关联，导致点击提交按钮毫无反应——而Chrome和Firefox对动态DOM的表单属性处理要宽松得多，所以能正常工作。

下面给你两个可行的解决方案，按需选择：

方案一：替换formaction，用JavaScript手动处理提交（推荐） #

这个方法完全绕开浏览器对formaction的兼容性问题，通用性最强：

1. 把原来的提交按钮改成普通按钮，用data-action属性存储目标提交地址：

<!-- 原来的按钮 -->
<button type="submit" formaction="/your-target-action">提交</button>

<!-- 修改后的按钮 -->
<button type="button" class="dt-submit-btn" data-action="/your-target-action">提交</button>

2. 添加全局点击事件处理提交逻辑：

// 用事件委托确保动态生成的按钮也能触发
$(document).on('click', '.dt-submit-btn', function() {
  const $btn = $(this);
  const $form = $btn.closest('form');
  const originalAction = $form.attr('action'); // 保存表单原action

  // 临时替换表单action为按钮指定的地址
  $form.attr('action', $btn.data('action'));
  // 提交表单
  $form.submit();
  // 恢复原action，避免影响表单其他操作
  $form.attr('action', originalAction);
});

方案二：在DataTables初始化完成后重新绑定提交逻辑 #

如果不想修改HTML结构，可以在DataTables的initComplete回调里手动处理按钮的提交事件，强制触发表单提交：

修改你的DataTables初始化代码：

$('#dataTable-script').DataTable({
  "scrollX": true, /* 横向滚动 */
  "responsive": false, /* 关闭响应式以启用scrollX，两者冲突 */
  "columnDefs": [ { "visible": true, "targets": [0, 1, 2, 3, 4... ]}],
  "initComplete": function() {
    // 给表格内的所有submit按钮绑定点击事件
    $('#dataTable-script').on('click', 'button[type="submit"]', function(e) {
      e.preventDefault(); // 阻止默认行为，避免IE11无响应
      const $btn = $(this);
      const $form = $btn.closest('form');
      const targetAction = $btn.attr('formaction');

      if (targetAction) {
        // 设置表单的action为按钮指定的地址
        $form.attr('action', targetAction);
      }
      // 手动触发表单提交
      $form.submit();
    });
  }
});

另外要注意：确保你的内联表单结构完整，没有被DataTables的DOM操作意外拆分——比如表单不要跨DataTables的tbody或thead元素，保持表单在单个表格单元格内，这样IE11才能正确识别表单和按钮的关联。

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