テーブル外のDataTableエクスポートボタン

Question

Webページに複数のテーブルがあり、それぞれがDataTableであるため、正常に動作しています。

各データテーブルのエクスポート機能を有効にしたいが、ボタンはテーブルDOMの外にある必要があります（また、各テーブルにはエクスポートする独自のボタンが必要です）。

は、私が使用してテーブルDOM内のHTML5]ボタンをgenrateことができます。

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

しかし、私は何らかの方法私は特定のテーブルのためのExcelへのエクスポートとして機能するように、テーブルのDOMの外にボタンを付けることが可能なたい。

Answer 1

constructorで各テーブルのボタンを初期化することで、ボタンの要素を任意のコンテナに配置できます。あなたがテーブルの外<div id="buttons"></div>要素にボタンを配置したい場合は、この

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

デモやる - >https://jsfiddle.net/qoqq3okg/

を私はあなたの複数のテーブルの設定を知らないが、今あなただけのいくつかを挿入する必要があります各要素に対応するボタンを上記のように要素に挿入します。

Answer 2

あなたはまた、あなたのクラスを追加することができ、

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