以下のように、DataTableの下部にボタンの列があります。しかし、今度colVis
はテーブルの上部に別のボタンを追加したいと思います。
この例に従って、配置する新しいボタンを指定して次のことを試みましたdom: 'Bfrtip'
が、エラーが発生します-Uncaught TypeError: Cannot read property 'tag' of undefined at new m (dataTables.buttons.min.js:6)
質問:
ボタングループとは別にデータテーブルボタンを表示するにはどうすればよいですか?
var historyTable = $('#escalation').DataTable({
"order": [[10, "desc"]],
colReorder: true,
columnDefs: [
{
orderable: false,
targets: [7, 11, 12, 13, 14]
},
{
"width": "15%",
"targets": [7, 11]
}
],
responsive: true,
buttons: [
{
extend: 'pdf',
footer: true,
exportOptions: {
columns: [1, 2, 5, 6, 11]
}
},
{
extend: 'print',
footer: true,
exportOptions: {
columns: [1, 2, 5, 6, 11]
}
},
'copy', 'csv', 'excel'
],
'iDisplayLength': 55,
});
new $.fn.DataTable.Buttons(historyTable, {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvis'
},
]
});
historyTable.buttons(1, null).container().appendTo(
historyTable.table().container()
);
またcolVis
、テーブルの上部にあるid colFilterのdivに新しいボタンを作成して追加することも試みましたが、役に立ちませんでした。
//Place colVis filter button at top of table
var colvis = new $.fn.dataTable.Buttons(historyTable, {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvis'
}
]
});
colvis.container().appendTo('#colFilter');
そして3回目の試みで、ここで説明されているこのアプローチを試しました。
//Place colVis filter button at top of table
var colvis = new $.fn.dataTable.Buttons(historyTable, {
buttons: [
{
extend: 'colvis',
postfixButtons: ['colvisRestore']
}
]
});
historyTable.buttons(3, null).container().appendTo('#colFilter');
このような例:
これは私のために働いた。ボタンを下部に1つ、上部に1つ配置します。ボタンの機能を問題なくテストしましたが、DataTableを介したボタンコンテナオブジェクトへのアクセスはテストしなかったため、副作用が発生する可能性があります。
https://jsfiddle.net/bindrid/sc0bo122/11/で動作することがわかります
$("#example").one("preInit.dt", function (evtObj, settings){
var $newbtncontainer = $("<div class='dt-buttons'></div>");
$("#example_wrapper").prepend($newbtncontainer);
$("a.buttons-colvis").appendTo($newbtncontainer);
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加