表外的 DataTable 导出按钮答案

【问题标题】：DataTable export button outside table表外的 DataTable 导出按钮
【发布时间】：2016-05-20 09:30:00
【问题描述】：

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

我想在每个数据表上启用导出到 excel 功能，但按钮应该在表 DOM 之外（并且每个表都应该有自己的导出按钮）。

我可以使用以下方法在表格 DOM 中生成 HTML5 按钮：

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

但我想通过某种方式在表格 DOM 外部附加一个按钮，作为特定表格的导出到 excel。

【问题讨论】：

标签： jquery datatables

【解决方案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> 元素中插入一些元素，并将每个表格的按钮插入到该元素中，如上所述。

【讨论】：

完美。非常感谢。
@davidkonrad 请检查这个stackoverflow.com/questions/41348631/…
这仅适用于 datatables.bootstrap.min.js 吗？有没有引导程序少的解决方案？
@AnilPBabu，它非常通用，与 BS 主题无关。所以是的，它也适用于 BS3 / BS4 主题。
@davidkonrad 你有 colvisGroup 的例子吗？我想添加一个外部多选列表来显示/隐藏选定的列。

【解决方案2】：

你也可以添加你的班级，

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

【讨论】：