jquery - 表外的数据表导出按钮

Question

我的网页上有多个表，每个表都是一个数据表，它工作正常。

我想在每个数据表上启用导出到 Excel 功能，但按钮应该位于表 DOM 之外(并且每个表应该有自己的导出按钮)。

我可以使用以下方法在表 DOM 内生成 HTML5 按钮:

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

但我希望通过某种方式可以在表 DOM 外部附加一个按钮，以充当特定表的 Excel 导出。

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/

我不知道您的多个表设置，但现在您只需沿每个 <table> 插入一些元素即可元素并将每个表的按钮注入(inject)到该元素中，如上所述。