How to display datatable button separate from button group?

Question

I have a row of buttons at the bottom of a DataTable like this below. But now I want to add a separate button colVis to the top of the table.

Following this example I've tried the following specifying the new button to be placed at dom: 'Bfrtip' but I get the error - Uncaught TypeError: Cannot read property 'tag' of undefined at new m (dataTables.buttons.min.js:6)

Question:

How can you display datatable button separate from button group?

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()
);

I also tried the following creating a new button for colVis and appending to a div with id colFilter at the top of the table to no avail:

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

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

And in a third attempt tried this approach explained 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');

Example like this:

Answer 1

This worked for me. It puts one button at the bottom and one at the top. I have tested the button functionality with no issues but did not test accessing the button container object via DataTable so there may be side effects.

you can see it work at 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);
});