webentwicklung-frage-antwort-db.com.de

DataTable-Exporttaste außerhalb der Tabelle

Ich habe mehrere Tabellen auf meiner Webseite und jede ist eine DataTable, sie funktioniert einwandfrei. 

Ich möchte den Export nach Excel-Funktionalität für jede Datentabelle aktivieren, aber die Schaltfläche sollte sich außerhalb des Tabellen-DOM befinden (und jede Tabelle sollte eine eigene Schaltfläche zum Exportieren haben).

Ich kann die HTML5-Schaltfläche im Tabellen-DOM mit Hilfe von generieren:

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

Aber ich möchte eine Möglichkeit, mit der ich eine Schaltfläche außerhalb des Tabellen-DOM anhängen kann, um als Export für eine bestimmte Tabelle nach Excel zu fungieren.

jquerydatatables
16
void

Initialisieren Sie jede Tabellenschaltfläche über einen -Konstruktor . Dadurch können Sie die Schaltflächenelemente in einem beliebigen Container platzieren. Wenn Sie die Schaltflächen in einem <div id="buttons"></div>-Element außerhalb der Tabelle platzieren möchten, tun Sie dies 

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

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

Ich kenne die Einrichtung mehrerer Tabellen nicht, aber Sie müssen jetzt nur einige Elemente entlang jedes <table>-Elements einfügen und Schaltflächen für jede Tabelle in dieses Element einfügen, wie oben beschrieben. 

30
davidkonrad

Sie können Ihre Klasse auch hinzufügen,

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