按钮

对于交互式表格使用常见的 UI 范例是显示能够触发特定操作（例如：更改表格状态、修改表格中的数据、收集表格中的数据或激活某个外部进程）的按钮。显示此类按钮是一种让最终用户感到舒适的界面，让他们觉得表格很熟悉。

DataTables 的按钮库提供了一个带有常见选项和 API 的框架，可用于 DataTables，但它也很容易扩展，因为它知道您很可能希望使用执行对您的应用程序来说独一无二的操作的按钮。

按钮有 四套插件 是核心软件的一部分——它们没有内置在核心软件中，而是根据需要包含进去，仅选择您需要的软件。其他扩展（例如 编辑器 和 选择器）也提供按钮配合此库使用，其操作对自己的行为独一无二。这确保了对您的表格执行的互动操作具有一个统一的界面。

下载

获取和使用按钮的最简单方式是使用 DataTables 下载构建器，您可以在其中选择想要在其页面上使用的软件，并让系统为您创建一个并托管一个 JavaScript 和 CSS 文件。

或者，也可以在您的页面上包含 单个文件、下载发行版软件包，或将 源代码仓库克隆到 GitHub。

初始化

按钮库可以通过多种不同方式进行初始化和使用

• 作为 DataTables 构造函数的一部分，带有 布局 选项和 按钮 特征（或者为向后兼容性而设定的一个顶级 按钮 对象）。
• 一个新建构造函数
• 传统 dom 选项

需要指出的是，可以创建多个 Buttons 实例用于一个 DataTable。这在您希望向最终用户展示不同的组按钮时非常有用——例如在表的上方和下方这样做。

在 DataTables 中

作为 DataTables 构造函数的一部分，按钮 特征可以配合 布局 选项使用，以将按钮（或多个按钮实例）放置在表周围。下面的示例展示了特定一组按钮的配置。请参阅 示例 进一步了解如何配置按钮。

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                'copy', 'excel', 'pdf'
            ]
        }
    }
});

注意，为了保持向下兼容性，也可以通过顶级 buttons 选项定义按钮配置（此方法仅限于每个表格的一组按钮），如下所示

new DataTable('#myTable', {
    buttons: [
        'copy', 'excel', 'pdf'
    ],
    layout: {
        topStart: 'buttons'
    }
});

构造函数

还可以使用带有 DataTable.Buttons 函数的 Javascript new 关键字创建按钮实例。此函数有两个参数

1. 要应用按钮的数据表实例
2. 按钮选项（这与 buttons 选项可用的选项相同。

let table = new DataTable('#myTable');

new DataTable.Buttons(table, {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
});

这种初始化方法在希望在表格周围之外的某个位置显示按钮时特别有用。使用 buttons().container() 方法获取按钮的容器元素，以便插入到所需的任何 DOM 中

table.buttons().container()
    .appendTo( '#toolbar' );

旧的 dom 选项

如果您使用 DataTables 1.x 代码，可能会看到 dom 参数被使用，该参数使用 ASCII 字符串定义放置表格控件元素的位置。Buttons 的字母是 B - 例如

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

这仍然可以与 DataTables 2 一起使用（但不能与 layout 同时使用 - 它们是互斥的），但建议更新为使用 layout。

特性

Buttons 提供以下特性