如何在 DataTables 表的每一行上为按钮添加 onclick 回调答案

【问题标题】：How to add an onclick callback for button on every row of a DataTables table如何在 DataTables 表的每一行上为按钮添加 onclick 回调
【发布时间】：2018-10-08 05:00:59
【问题描述】：

我有一个表格，每行都有一个按钮。我使用 JS DataTables 格式化表格。我想为每一行的按钮添加一个 onclick 回调。

现在，我有以下内容：

$(document).ready(function(){
     $(".btn-email").click(send_email);
     $(".btn-fix").click(toggle_status);
});

但是，这只会将 onclick 回调添加到显示的行的按钮，即当导航到表格的新页面时（因为 DataTables 处理分页），按钮不起作用。

我尝试了以下方法，但没有运气：

$("#jfTable").on( 'draw', function () {
    $(".btn-email").click(send_email);
    $(".btn-fix").click(toggle_status);
} );

这样做的正确方法是什么？

【问题讨论】：

标签： javascript datatables onclick

【解决方案1】：

我希望这样的内容对您有所帮助，因为它确实适用于我的情况。

您可以添加columns 属性，并且可以在每一列上按名称映射您的数据对象。
您可以访问名为“dataObject”的对象中的全部数据
因此，我在这里创建了一个链接，其中包含来自其他列 (dataObject.id) 的 id。您可以为按钮创建函数，并将其与按钮属性中的 OnClick 事件一起使用。

查看我的代码：

{
columns: [{
          data: "name",
          render: function(data, type, dataObject, meta) {
            return `<a class="col" id="${dataObject.id}">${data}</a>`;
          }
         }]     
}
    
$(document.body).on("click", ".col", function(item) {
  console.log(item)
})

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

我选择了一些更简单的东西：

$(document).ready(function(){
  $('#jfTable').on('page.dt search.dt length.dt', function () {
    $(".btn-email").off("click").on("click", send_email);
    $(".btn-fix").off("click").on("click", toggle_status);
  });
});

page.dt、search.dt 或 length.dt 在数据表视图以相应方式更新时被触发。 .off("click") 避免在按钮上附加多个相同的点击事件（例如，来自上一个分页）。

【讨论】：