{hero}

按钮选择器

Button selector(按钮选择器)。
请注意 - 此属性要求 DataTables 有 Buttons 扩展。

说明

DataTables 的 Buttons 扩展提供了一个灵活的 API,它使用 buttons()button() 方法作为其基本访问点。使用这两个方法,您可以从一个或多个按钮组(实例)中选择一个或多个按钮,然后对这些选定的按钮执行操作。这被设计为与 核心 DataTables API(用于行、列和单元格选择)的行为相匹配,从而为所有 DataTables 交互提供一致的 API 接口。

选项

以下选项可以用作 buttons()button() 方法的按钮选择器

  • 无选择器 - 选择所有按钮
  • null - 无选择器 的别名
  • integer - 根据索引选择按钮
  • {\d}{\d}-{\d} - 按钮索引选择器,包括子按钮(例如 2-1
  • {string}:name - 按钮名称选择器
  • string - jQuery 选择器(在按钮节点上执行)
  • node - DOM 元素选择器
  • jQuery - DOM 元素选择器
  • array - 包含以上任何选项组合的数组

无选择器

无选择器(即 undefinednull)将选择集合中可用的所有按钮,包括集合中的任何按钮。这提供了对实例中的所有按钮同时执行操作的能力。

禁用所有按钮
var table = new DataTable('#myTable');

table.buttons().disable();

integer

整数选择器将选择顶级按钮(即那些始终可见的 - 不在集合中的那些)作为简单的索引计数器。按钮按索引添加和存储,因此提供了此简单选择器选项,如果您没有动态添加和删除按钮(如果是这样,请考虑使用下面的按钮名称选择器),这将非常有用。

仅禁用第二个按钮
var table = new DataTable('#myTable');

table.button(1).disable();

{\d} 或 {\d}-{\d}

如上所述,整数选择器只能选择顶级按钮,但也可以使用索引来选择位于集合中的按钮。在这种情况下,给出的选择器是 {topIndex}-{collectionIndex},其中两个索引均从 0 开始。

# 例如,考虑按钮结构
buttons: [
    'add',
    'edit',
    'remove',
    {
        text: 'Export',
        buttons: ['csv', 'pdf']
    }
]

可以使用 table.button( 3 ) 选择处于最上层级的导出按钮,而可以使用 table.button( '3-0' ) 选择CSV 按钮。

值得注意的是集合的深度不受限制。如果存在 集合按钮 > 子集合 > 子子集合 等结构,则首先生成子子集合的首个按钮,选择器会变为 {\d}-{\d}-{\d},或变为实际数字 0-0-0

{string}:name

可以使用 buttons.buttons.name 选项命名每个按钮,使按钮可以被单独选择,而无需按照上述索引选择器选项那样跟踪按钮索引。此外,按钮名称不必唯一,因此一个名称可以指称多个按钮。

除了可以使用字符串选择单个按钮外,可以使用逗号分隔符选择多个按钮(与在 CSS 或 jQuery 选择器中使用逗号选择多个元素的方式非常相似)。

使用名称选择器禁用按钮
var table = new DataTable('#myTable', {
    buttons: [{ extend: 'csv', name: 'csv' }]
});

table.buttons('csv:name').disable();

字符串

如果以字符串形式提供选择器,它最初将被检查,以查看是否与上述选择器选项中的任一选项(具体而言,是索引选择器或名称选择器)匹配。如果不是,按钮节点将被收集到 jQuery 实例中,并以筛选器形式运行提供的选择器。此操作尤其适用于基于类名进行选择(可以使用 buttons.buttons.className 设置)和其他常见 DOM 属性。

使用类名筛选器禁用按钮
var table = new DataTable('#myTable', {
    buttons: [{ extend: 'csv', className: 'csv' }]
});

table.buttons('.csv').disable();

节点

使用 DOM 元素选择按钮。如果你使用按钮的 DOM 事件且仅拥有对其引用的节点,这可能会派上用场。

在鼠标进入时启用按钮
var table = new DataTable('#myTable');

$('#content').on('mouseenter', 'a.dt-button', function (e) {
    table.button(this).enable();
});

jQuery

与上述的 node 类型非常相似(因为 jQuery 对象是 DOM 节点的类似数组列表),可以将 jQuery 实例作为按钮选择器提供。如果你已选择要执行操作的节点,这会派上用场。

禁用具有类名 csv 的按钮
var table = new DataTable('#myTable');

table.buttons($('a.dt-button.csv')).disable();

数组

上述选项的任意组合都可以作为选择器一并提供,从而提供一种选择多个按钮或通过在数组中提供所需的选项来混合选择器类型的方法。按钮将自动去除任何重复项,以确保通过 API 请求的任何操作仅对每个按钮执行一次。

禁用按钮索引 0 和所有具有类名 csv 的按钮
var table = new DataTable('#myTable');

table.buttons([0, '.csv']).disable();