在jQuery DataTable中实现按钮点击传ID及列ID复用的方法问询

问题1：将行ID传递到按钮点击事件 #

首先要修正一个问题：你给每行按钮都用了相同的id="btnAddNotes"，重复ID会导致事件绑定异常，建议改用class。然后通过data-id属性存储行ID，点击事件中直接读取该属性即可。

修改后的列定义代码：

{
  data: null,
  render: function (data, type, row) {
    // 用class替代重复ID，同时将行ID存入data-id属性
    return '<button class="btn btn-success btnAddNotes" type="button" data-toggle="modal" data-target="#my_modal" data-id="' + $('&lt;div/&gt;').text(row.id).html() + '">Add Notes</button>';
  }
}

修改后的点击事件代码：

$(document).on("click", ".btnAddNotes", function (e) {
  // 获取行ID
  const rowId = $(this).data('id');
  console.log(rowId); // 此处可直接使用行ID
});

说明：render函数的row参数包含当前行的所有数据，直接通过row.id取到行ID，存入按钮的data-id属性；点击事件中通过$(this).data('id')读取即可。

问题2：将“At Location”列的ID设置到“Notes”列按钮的data-id属性 #

Notes列的render函数中，row参数包含当前行的完整数据源，而“At Location”列绑定的是data: "id"，所以直接使用row.id就能拿到对应的值，同时做XSS防护处理特殊字符。

修改后的列定义代码：

columns: [
  { 
    title: "At Location",
    data: "id" ,
    width: "10%",
    className: "text-center",
    render: function(data, type, full, meta){
      return '<input type="checkbox" name="id[]" value="' + $('&lt;div/&gt;').text(data).html() + '">';
    }
  },
  {
    title: "Notes",
    render: function(data, type, row, meta) {
      // 转义特殊字符防止XSS，直接使用row.id获取目标ID
      const safeId = $('&lt;div/&gt;').text(row.id).html();
      return '<button data-id="' + safeId + '" class="btn" type="button">Add Notes</button>';
    }
  }
]

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