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

Question

我有一个 DataTable 显示 Branches 的数据，定义了两个自定义按钮：Add 和 Update。它们在 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 上找不到任何关于如何根据条件 enable/disable 它们的内容。到目前为止，我尝试过的是：

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 and here。

感谢您的指导。

Answer 1

您所指的最后一个 link 包含您正在寻找的解决方案。但是文档有点模糊，我猜它需要一个可靠的例子。目前还不清楚你是如何创建按钮的（你展示了这两种方法）但下面是一个内联示例，它也可以与构造函数一起使用。简单地给按钮一个 class，比如 .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插件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/

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

Enabling custom button (disabled by default) when row is selected

javascript

jquery

datatables

tabletools

datatables-1.10