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

Question

我有一个数据表，其中显示了两个定义了两个自定义按钮的分支数据：添加和更新。它们在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 selectand deselectevents 来更新按钮的enabled状态.edit：

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

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