如何将编辑和删除按钮添加到动态创建的列到每一行答案

【问题标题】：How To add Edit And Delete Button to the Dynamically Created Column to each rows如何将编辑和删除按钮添加到动态创建的列到每一行
【发布时间】：2019-06-09 17:05:48
【问题描述】：

我有 JSON 对象，我从中创建动态列。在第 5 位我有我想传递给服务器的 ID。如何在点击特定按钮时实现它

var jsonData = data[key[0]];
var column = data[key[1]];

$('#example').DataTable({
  data: jsonData,
  columnDefs: [{
    targets: 5,
    render: function(data, type, full, meta) {
      if (type === 'display') {
        data =
          '<button class="btn-edit" type="button">Edit</button>' +
          '<button class="btn-delete" type="button">Delet</button>';
      }

      return data;
    }
  }],
  columns: column
});

【问题讨论】：

您可以将 ID 作为自定义 HTML5 data- 属性提供给按钮。然后，听从这些按钮冒泡的click 事件，然后您就可以访问与单击特定按钮相关联的 ID。

标签： jquery datatables serverside-javascript

【解决方案1】：

使用下面的代码。

注意：我假设您使用数组数组作为数据，并且 ID 是第一个元素 (data[0])。否则相应地更改代码。

// Handle click on "Edit" button
$('#example').on('click', 'tbody .btn-edit', function(){
   var $row = $(this).closest('tr');
   var data = table.row($row).data();

   // console.log(data);

   alert('Edit ' + data[0]);
});

// Handle click on "Delete" button
$('#example').on('click', 'tbody .btn-delete', function(){
   var $row = $(this).closest('tr');
   var data = table.row($row).data();

   // console.log(data);

   alert('Delete ' + data[0]);
});

【讨论】：