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

Question

我有一张桌子，每一行都有一个按钮。 我使用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);
} );

正确的方法是什么？

Answer 1

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

• 您可以添加columns属性，并且可以在每个列上按名称映射数据对象。
• 您可以从名为“ dataObject”的对象访问整个数据
• 所以在这里，我要创建一个链接，该链接的ID为另一列（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) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 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")避免具有附加了多个相同单击事件的按钮（例如，来自先前的分页）。