如何让DataTables同时实现行内按钮功能与行点击跳转功能？

问题核心是事件冒泡：点击行内按钮时，事件会向上传递到父级<tr>元素，导致行的跳转事件也被触发。解决思路就是在按钮的点击事件中阻止事件冒泡，让按钮动作独立执行，不触发行的跳转逻辑。

具体实现步骤： #

• 保留行跳转的原有逻辑：给表格行绑定点击事件，触发页面跳转。
• 给行内按钮添加事件处理并阻止冒泡：在按钮的点击事件中，调用event.stopPropagation()切断事件向上传递的路径。

示例代码： #

// 初始化DataTables
var table = $('#example').DataTable({
  columns: [
    { data: 'id' },
    { data: 'name' },
    // 渲染包含按钮的列
    { 
      data: 'action',
      render: function(data, type, row) {
        return '<button class="row-btn" data-id="' + row.id + '">执行操作</button>';
      }
    }
  ]
});

// 行点击跳转逻辑
$('#example tbody').on('click', 'tr', function() {
  var rowData = table.row(this).data();
  // 跳转到目标页面，以行ID作为参数示例
  window.location.href = '/detail-page/' + rowData.id;
});

// 按钮点击逻辑，阻止事件冒泡
$('#example tbody').on('click', '.row-btn', function(event) {
  // 阻止事件传递到父级tr
  event.stopPropagation();
  
  var targetId = $(this).data('id');
  // 执行按钮对应的业务逻辑，比如接口请求、弹窗等
  console.log('执行按钮操作，目标ID：' + targetId);
  // 示例：$.post('/api/handle-action', {id: targetId}, function(res) { ... });
});

关键说明： #

• event.stopPropagation()仅阻止事件向上冒泡，不会影响按钮自身的默认行为，是更安全的选择。
• 若使用return false，相当于同时执行event.stopPropagation()和event.preventDefault()，适合不需要按钮默认行为的场景。
• 采用事件委托绑定按钮事件（on('click', '.row-btn', ...)），能确保动态生成的行内按钮也能正常触发事件。

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