按钮配置

DataTables 扩展提供一个 预配置按钮,无需任何自定义即可使用。但是,您不可避免地希望更改按钮属性以满足您的需求 - 这可能像更改显示文本一样简单,或者像提供自定义回调函数以修改 PDF 文档的布局一样复杂!

自定义按钮

[索引](初始化指南)展示了如何通过引用与按钮名称匹配的简单字符串来使用按钮

$('#myTable').DataTable( {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );

这告诉按钮简单地使用该名称按钮的默认选项。字符串由按钮自动扩展到一个按钮定义对象 - 这个对象包含按钮的各个属性。

我们还可以传递从可用按钮扩展的对象

$('#myTable').DataTable( {
    buttons: [
        {
            extend: 'copy',
            text: 'Copy to clipboard'
        },
        'excel',
        'pdf'
    ]
} );

请注意,我们仍然像以前一样有三个按钮,但是第一个按钮最初用字符串表示已被一个对象替换。 buttons.buttons.extend 选项用于告诉按钮将哪种按钮类型用作按钮的基准(如果您希望 定义自定义按钮,这是可选的!)。

在上述情况下,buttons.buttons.text 选项已被用于设置按钮文本。此选项适用于所有按钮 - 有许多通用选项(见下文),并且每种按钮类型还能够定义特定于其自身的选项 - 应参阅每个按钮的参考文档以了解可用的完整选项。

基于这一概念-使用 { extend: 'excel' }(即没有其他参数)与单纯使用 'excel' 的功能是等效的!

内置选项

Buttons 库提供一些适用于所有按钮类型的一些核心选项。其中最常用的是

初始化选项参考 中提供了完整选项列表。

键访问

按钮的一个比较有趣的内置选项是 buttons.buttons.key 选项。这提供了给按钮操作指定自定义按键的能力。例如可以设置按压 e(是否使用任何修饰键都可以)触发选中行的编辑。

仅在页面上没有其他焦点元素时,按键才会产生作用。所以,例如,如果把某个按钮绑定到 e 按键,当用户正在 DataTables 搜索框中输入文字时,按 e 按键就不会触发!

buttons.buttons.key 选项可以作为字符串(简单字符绑定)或对象来给定,后者允许同时需要修饰键。

例如,考虑

$('#myTable').DataTable( {
    buttons: [
        {
            extend: 'copy',
            text: '<u>C</u>opy',
            key: {
                key: 'c',
                altKey: true
            }
        }
    ]
} );

在这种情况下,复制操作在按下 alt 键 + c 组合键时触发。还请注意,已经使用 text 属性强调给最终用户,c 按键能执行某些操作。