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

时间:2019-01-15 16:31:40

标签: jquery datatables serverside-javascript

我正在从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
});

1 个答案:

答案 0 :(得分:0)

使用下面的代码。

注意:我假设您使用数组数组作为数据,并且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]);
});