DataTable export button outside table

Question

I have multiple tables on my web page and each one is a DataTable, it is working fine.

I want to enable the export to excel functionality on each of the datatable but the button should be outside the table DOM (and each table should have its own button to export).

I can genrate the HTML5 button inside the table DOM using:

$('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );

But i want someway by which i can attach a button outside the table DOM to act as a export to excel for specific table.

Answer 1

You can add your class also,

buttons[0].classList.add('yourClassName');

Answer 2

Initialize each tables buttons via a constructor, by that you can place the button elements in any container you want. If you want to place the buttons in a <div id="buttons"></div> element outside the table, do this

var buttons = new $.fn.dataTable.Buttons(table, {
     buttons: [
       'copyHtml5',
       'excelHtml5',
       'csvHtml5',
       'pdfHtml5'
    ]
}).container().appendTo($('#buttons'));

demo -> https://jsfiddle.net/qoqq3okg/

I dont know your multiple tables setup, but now you just have to insert some elements along each <table> element and inject buttons for each table into that element as described above.