How to position DataTables buttons outside of table wrapper

Can you please take a look at This Demo and let me know how I can re-position the dataTabes buttons somewhere else , let say inside .panel-heading calss and apply btn-sm to them?

Here is the very basic standard format which I have now

$(document).ready(function() {
    $('#example').DataTable({
         responsive: true,
         dom: 'Bfrtip',
         buttons: ['copy', 'excel', 'pdf', 'csv']
    });
});

and as you are fully aware it is adding the buttons inside #example-wrapper

Answer

Sure. Use jQuery appendTo(), like this:

//create DataTable first, then...
$("#example_wrapper > .dt-buttons").appendTo("div.panel-heading");

See this fiddle: https://jsfiddle.net/gz586wpj/1/

There’s also a prependTo() that you can consider.