25

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.

Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
void
  • 36,090
  • 8
  • 62
  • 107

2 Answers2

50

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.

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
  • Perfect. Thanks a lot. – void Feb 10 '16 at 09:43
  • @davidkonrad Pls check this one http://stackoverflow.com/questions/41348631/datatable-export-button-display-in-custom-position –  Dec 28 '16 at 18:10
  • does this work only with datatables.bootstrap.min.js? is there a bootstrap less soln? – Anil P Babu Mar 31 '20 at 04:34
  • @AnilPBabu, it is very generic, has nothing to do with BS theming what so ever. So yes, it works with the BS3 / BS4 themes as well. – davidkonrad Mar 31 '20 at 04:45
  • @davidkonrad Do you have any examples for colvisGroup? I want to add an external multi-select list for showing/hiding the selected columns. – Anil Yadav Feb 10 '22 at 07:34
0

You can add your class also,

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