选择行时启用自定义按钮（默认禁用）

Question

我有一个DataTable显示分支的数据，并定义了两个自定义按钮：添加和更新。他们在JavaScript部分的顶部初始化

var buttons; 
var tblBranch; 

$.fn.dataTable.ext.buttons.add = { 
      className: 'button-add', 
      text: "Add Branch", 
      action: function (dt) { 
       onBtnAddClicked() 
      } 
     }; 

$.fn.dataTable.ext.buttons.update = { 
      className: 'button-update', 
      text: "Update", 
      action: function (dt) { 
       onBtnUpdateClicked() 
      } 
     }; 

我想禁用页面加载编辑按钮，只启用它时，已经选择了行点击。问题是，我正在使用自定义按钮，并且在datatables.net上找不到关于如何根据条件启用/禁用它们的任何信息。到目前为止，我已经试过是这样的：

tblBranch = $("#tblBranches").DataTable({ 
     dom: 'Blfrtip', 
     buttons: { 
      buttons :[ 
       'add', 'update' 
      ] 
     } 
     select: true; 
}) 

$("#tblBranches tbody").on('click', 'tr', function() { 
     if (tblBranch.row(this).hasClass('selected')) { 
      $('button-update').removeClass("DTTT_disabled"); 
     } 
     else { 
      table.$('tr.selected').removeClass('selected'); 
      $('button-update').addClass("DTTT_disabled"); 
     } 
}); 

但我不知道是什么代码，以禁用的编辑按钮时，页面加载应该是这样的，我已经看了here，here，here和here。

感谢您的任何指导。

Answer 1

您提到的最后一个链接持有您正在寻找的解决方案。但是文档有些模糊，猜想它需要一个可靠的例子。目前还不清楚你如何创建按钮（你显示了两种方法），但下面是一个内联示例，它也可以用于构造函数。简单地给按钮的一类，像.edit，它从开始设置为已禁用：

var table = $('#example').DataTable({ 
    dom: 'Bfrtip', 
    select: true, 
    buttons: [ 
    { 
     text: 'Edit', 
     className: 'edit', 
     enabled: false, 
     action: function (e, dt, node, config) { 
     //do something 
     } 
    }, 
    { 
     text: 'Add', 
     action: function (e, dt, node, config) { 
     //do something 
     } 
    } 
    ] 
}) 

然后使用选择插件select和deselect事件更新.edit按钮的enabled状态：

$('#example').on('select.dt deselect.dt', function() { 
    table.buttons(['.edit']).enable(
    table.rows({ selected: true }).indexes().length === 0 ? false : true 
) 
}) 

demo - >https://jsfiddle.net/pmee6w2L/