如何为配置不同的多个DataTables统一绑定操作按钮点击事件

核心实现逻辑 #

不需要为每个表格单独编写事件绑定，也不需要硬编码对应表格的实例变量，通过点击元素向上溯源到所属表格DOM节点，即可动态获取对应DataTable实例，自动匹配当前操作的表格。

注意前置修正 #

原代码中操作按钮使用id选择器#btn_edit不符合HTML规范（id需页面唯一，多表格复用相同id会导致选择器匹配异常），先将按钮选择器改为类选择器：

• 编辑按钮添加类名 btn-edit
• 查看按钮添加类名 btn-view
• 删除按钮添加类名 btn-remove

可直接复用的代码 #

// 统一绑定所有DataTable表格的编辑按钮点击事件
$('table.dataTable tbody').on('click', '.btn-edit', function(e) {
  e.preventDefault();
  // 定位当前点击行
  const $currentTr = $(this).closest('tr');
  // 动态获取当前行所属的DataTable实例，无需硬编码表变量
  const currentTable = $currentTr.closest('table').DataTable();
  // 获取当前行绑定的完整数据源
  const rowData = currentTable.row($currentTr).data();

  // 通用编辑逻辑直接写在这里
  // 不同表格的差异化逻辑，可通过表格id做分支判断
  const tableId = $currentTr.closest('table').attr('id');
  switch (tableId) {
    case 'tbUser':
      // tbUser表专属编辑逻辑
      break;
    case 'tbRole':
      // tbRole表专属编辑逻辑
      break;
    case 'tbJob':
      // tbJob表专属编辑逻辑
      break;
  }
});

实现说明 #

• 选择器使用table.dataTable：DataTables初始化完成后会自动给表格添加dataTable类名，可避免误绑定页面上未初始化DataTable的普通表格。
• 使用closest()方法查找祖先节点：相比parents()方法，closest()会匹配最近的符合条件的祖先元素，在DataTables开启滚动、固定列等导致DOM嵌套变化的场景下，也不会出现节点查找错误，稳定性更高。
• 该写法完全兼容三个表格配置项、列定义不同的场景，只要操作列按钮类名统一即可生效，后续新增DataTable表格也不需要额外修改绑定代码。

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