Как отображать кнопку datatable отдельно от группы кнопок?

Question

У меня есть ряд кнопок внизу DataTable, как показано ниже. Но теперь я хочу добавить отдельную кнопку colVis в начало таблицы.

После this example я попытался следующими указаниями новой кнопки для размещения на dom: 'Bfrtip', но я получаю ошибку - Uncaught TypeError: Cannot read property 'tag' of undefined at new m (dataTables.buttons.min.js:6)

Вопрос:

Как можно отобразить кнопку DataTable отдельно от кнопки группы ?

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 и добавления к DIV с идентификатором colFilter в верхней части таблицы без толка:

//Place colVis filter button at top of table 
    var colvis = new $.fn.dataTable.Buttons(historyTable, { 
     dom: 'Bfrtip', 
     buttons: [ 
      { 
       extend: 'colvis' 
      } 
    ] 
    }); 

    colvis.container().appendTo('#colFilter'); 

И в третьей попытке попытался это подход объяснил here:

//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'); 

Пример как это:

Answer 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); 
});