如何在jQuery DataTable中点击删除按钮显示确认提示框？

嘿，作为DataTable新手不用慌，这个需求其实很容易实现，我来一步步给你讲清楚怎么做：

核心思路 #

因为DataTable的表格行是通过AJAX动态加载的，直接给删除按钮绑定点击事件会失效，我们需要用事件委托来监听动态生成的元素；点击删除按钮时先弹出确认框，用户确认后再执行删除跳转，否则取消操作。

具体修改步骤 #

1. 修改删除按钮的渲染代码：给生成的删除链接添加一个专属class（比如delete-link），方便后续绑定事件：

{ "data": "ID", "width": "50px", "render": function (id) {
  // 新增class="delete-link"
  return '<a href="/Patient/Delete/' + id + '" class="delete-link">Delete</a>';
} }

2. 添加事件监听代码：在DataTable初始化完成后，添加事件委托逻辑，处理删除按钮的点击：

$(document).ready(function () {
  $('#patientTable').DataTable({
    // 你的DataTable原有配置保持不变
    "ajax": {
      "url": "/Patient/LoadData",
      "type": "GET",
      "datatype": "json"
    },
    "columns": [
      { "data": "Name", "autoWidth": true },
      { "data": "Address", "autoWidth": true },
      { "data": "Date", "autoWidth": true, "render": function (value) {
          if (value === null) return "";
          var pattern = /Date\(([^)]+)\)/;
          var results = pattern.exec(value);
          var dt = new Date(parseFloat(results[1]));
          return (dt.getMonth() + 1 + "/" + dt.getDate() + "/" + dt.getFullYear());
        } 
      },
      { "data": "Description", "autoWidth": true },
      { "data": "Amount", "autoWidth": true },
      { "data": "ID", "width": "50px", "render": function (id) {
          return '<a href="/Patient/Edit/' + id + '">Edit</a>';
        } 
      },
      // 修改后的删除列配置
      { "data": "ID", "width": "50px", "render": function (id) {
          return '<a href="/Patient/Delete/' + id + '" class="delete-link">Delete</a>';
        } 
      }
    ]
  });

  // 新增：监听删除按钮点击事件
  $(document).on('click', '.delete-link', function(e) {
    // 先阻止默认的跳转行为
    e.preventDefault();
    // 弹出确认提示框
    if (confirm("确定要删除该记录吗？")) {
      // 用户确认后，跳转到删除地址
      window.location.href = $(this).attr('href');
    }
    // 用户取消的话，什么都不做
  });
});

额外拓展（可选） #

如果之后你想改成AJAX异步删除（不用跳转页面），只需要把window.location.href换成AJAX请求即可，示例代码如下：

if (confirm("确定要删除该记录吗？")) {
  $.ajax({
    url: $(this).attr('href'),
    type: 'POST', // 根据后端接口调整请求方式
    success: function() {
      // 删除成功后刷新DataTable数据
      $('#patientTable').DataTable().ajax.reload();
      alert('删除成功！');
    },
    error: function() {
      alert('删除失败，请重试！');
    }
  });
}

这样就完成啦，点击删除按钮时就会弹出你想要的确认提示框了～

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