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和{{ 3}}

感谢任何指导。

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

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

演示 - ＆gt;的 https://jsfiddle.net/pmee6w2L/

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

1 个答案: