Я использую 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 где-нибудь еще - рядом с остальными кнопками, а не с помощью группы кнопок datatables по умолчанию.
Это то, что я пробовал:
<script>
datatable = $('.datatableclass').DataTable( {
buttons: ['excelHtml5','colvis']
});
datatable.buttons('.buttons-colvis').container().appendTo( $('#colvis-div') );
</script>
...
<div id = "colvis-div"></div>
Это работает, но включает всю группу кнопок (кнопки экспорта + colvis). Я только хочу показать кнопку colvis.
Для этого можно использовать 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)
задокументирован здесь. 1
относится ко второй созданной группе кнопок (с нулевым индексом).
Есть дополнительные способы выбрать нужную группу, если вы не хотите использовать её индекс. Так, например, использование имени также будет работать:
table.buttons('colvis-button', null).container().appendTo( $('#colvis-div') );
В моем случае конечный результат таков: под таблицей добавлен раздел colvis:
Спасибо, Андрей, теперь понял. Это помогло.