Skip to content

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() {
         responsive: true,
         dom: 'Bfrtip',
         buttons: ['copy', 'excel', 'pdf', 'csv']

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



Sure. Use jQuery appendTo(), like this:

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

See this fiddle:

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

User contributions licensed under: CC BY-SA
8 People found this is helpful