Datatable使用rowcallback时如何排除指定按钮列避免点击触发回调

方案1：阻断按钮的事件冒泡（推荐，侵入性最低） #

直接在功能按钮的点击事件回调中添加event.stopPropagation()，阻止点击事件向上冒泡到行元素，就不会触发行上绑定的交互逻辑，示例代码如下：

// 功能按钮点击事件绑定
$('.datatable-wrap').on('click', '.row-action-btn', function(e) {
  e.stopPropagation(); // 仅需添加这一行即可
  // 原有按钮业务逻辑
})

方案2：在rowCallback的行逻辑中增加点击源判断 #

如果不方便修改按钮的事件绑定，可以在rowCallback绑定行交互时，先判断点击源是否属于按钮列，匹配则跳过行逻辑执行：

1. 首先在DataTable初始化配置中给按钮列添加专属类名，方便后续识别：

$('#yourTable').DataTable({
  // 其他基础配置
  columnDefs: [
    // targets填写按钮列的索引，从0开始计数，假设按钮是第5列就填4
    { targets: 4, className: 'action-column' }
  ],
  rowCallback: function(row, data, dataIndex) {
    $(row).on('click', function(e) {
      // 点击源属于按钮列时直接返回，不执行后续行逻辑
      if ($(e.target).closest('.action-column').length) {
        return;
      }
      // 原有行交互业务逻辑
    })
  }
})

补充说明 #

• 若未给按钮列提前设置专属类，也可以通过$(e.target).closest('td').index()获取点击元素所在的列索引，和按钮列的索引对比判断即可。
• 不需要修改rowCallback本身的触发逻辑，仅对内部绑定的行交互代码做过滤即可，避免影响DataTable的原生渲染逻辑。

内容的提问来源于stack exchange，提问作者Johan Sebastian Sanchez Rodrig