DataTable export button outside table

问题:

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.

回答1:

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.

回答2:

You can add your class also,

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