Datatables直接插入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

您可以使用按钮 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') );

在上面的代码片段中，buttons(1, null) select 或者是 documented here。 1 指的是创建的第二个（零索引）按钮组。

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

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

就我而言，最终结果是这样的，在 table 下方添加了 colvis div:

Datatables直接插入colvis按钮

Datatables direct insertion of colvis button

datatables

datatables-1.10