数据表直接插入colvis按钮

Question

我正在使用 Datatables 并且 colvis 按钮可以正常工作：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.22/b-1.6.5/b-colvis-1.6.5/b-html5-1.6.5/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.22/b-1.6.5/b-colvis-1.6.5/b-html5-1.6.5/datatables.min.js"></script>

datatable = $('.datatableclass').DataTable( {
  dom: 'Bfrtip',
  buttons: ['excelHtml5','colvis']
});

但我正在尝试将 colvis 按钮放在其他地方 - 与我的其余按钮一起放置，而不是使用默认的数据表按钮组。

这是我尝试过的：

<script>
datatable = $('.datatableclass').DataTable( {
  buttons: ['excelHtml5','colvis']
});

datatable.buttons('.buttons-colvis').container().appendTo( $('#colvis-div') );
</script>
...
<div id="colvis-div"></div>

这可行，但包括整个按钮组（导出 + colvis 按钮）。我只想显示 colvis 按钮。

Answer 1

您可以使用 Buttons API 来处理这个问题。这是一种方法：

首先以通常的方式创建您的 Excel 按钮，但不要创建 colvis 按钮：

table = $('#example').DataTable( {
  dom: 'Bfrtip',
  buttons: ['excelHtml5']
} );

然后使用 API 创建colvis 按钮：

new $.fn.dataTable.Buttons( table, {
  name: 'colvis-button',
  buttons: ['colvis']
} );

table.buttons(1, null).container().appendTo( $('#colvis-div') );

在上面的 sn-p 中，buttons(1, null) 选择器是documented here。 1 指的是创建的第二个（零索引）按钮组。

如果你不想使用它的索引，有additional ways可以选择需要的组。因此，例如，使用名称也可以：

table.buttons('colvis-button', null).container().appendTo( $('#colvis-div') );

在我的例子中，最终结果是这样的，在表格下方添加了 colvis div：