Bouton d'exportation DataTable en dehors de la table

Question

J'ai plusieurs tables sur ma page Web et chacune est un DataTable, cela fonctionne bien. 

Je veux activer la fonctionnalité d'exportation vers Excel sur chacun des objets de données, mais le bouton doit se trouver en dehors de la table DOM (et chaque table doit avoir son propre bouton pour l'exportation).

Je peux générer le bouton HTML5 à l'intérieur du tableau DOM à l'aide de:

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

Mais je veux quelque part par lequel je peux attacher un bouton en dehors de la table DOM pour agir comme une exportation vers Excel pour une table spécifique.

Answer 1

Initialisez les boutons de chaque tableau via un constructeur , vous pourrez ainsi placer les éléments du bouton dans le conteneur de votre choix. Si vous souhaitez placer les boutons dans un élément <div id="buttons"></div> en dehors de la table, procédez comme suit. 

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

démo -> HTTPS://JSFIDDLE.NET/QOQQ3OKG/

Je ne connais pas la configuration de vos tables multiples, mais vous devez maintenant insérer quelques éléments le long de chaque élément <table> et injecter des boutons pour chaque table dans cet élément, comme décrit ci-dessus. 

Answer 2

Vous pouvez aussi ajouter votre classe,

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