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”的对象访问全部数据
因此，我在这里创建一个具有其他列（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")避免使用带有多个相同点击事件的按钮（例如，来自上一个分页）。

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

2 个答案: