javascript - How to position DataTables buttons outside of table wrapper - Stack Overflow

admin管理员组

文章数量:1332403

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

Share Improve this question Follow edited Apr 3, 2021 at 13:17 Syscall 19.8k1010 gold badges4343 silver badges5858 bronze badges asked Oct 28, 2015 at 19:22 BehseiniBehseini 6,3282323 gold badges8686 silver badges139139 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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.

本文标签： javascriptHow to position DataTables buttons outside of table wrapperStack Overflow