选中行时启用自定义按钮（默认情况下禁用）

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");
        }
});

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

谢谢你的指导。

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 plugins select和deselect事件来更新.edit按钮的enabled状态：

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

演示 - > https://jsfiddle.net/pmee6w2L/