表外的DataTable导出按钮

时间:2016-02-10 06:25:50

标签: jquery datatables

我的网页上有多个表格,每个表格都是一个DataTable,它运行正常。

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

我可以使用:

生成表DOM中的HTML5按钮
$('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );

但是我想在某种程度上我可以在表DOM之外附加一个按钮,作为特定表的excel导出。

2 个答案:

答案 0 :(得分:34)

通过constructor初始化每个表格按钮,您可以将按钮元素放在所需的任何容器中。如果要将按钮放在表格外的<div id="buttons"></div>元素中,请执行此操作

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

演示 - &gt;的 https://jsfiddle.net/qoqq3okg/

我不知道您的多个表设置,但现在您只需要在每个<table>元素中插入一些元素,并将每个表的按钮注入该元素,如上所述。

答案 1 :(得分:0)

您也可以添加课程,

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