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

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

• javascript
• jquery
• datatables

1 Answer 1

Sure. Use jQuery appendTo(), like this:

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

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

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