DataTable导出按钮外面的表 [英] DataTable export button outside table

问题描述

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

我想启用导出到每个datatable的excel功能，但是按钮应该在DOM之外（每个表都应该有自己的按钮来导出）

我可以使用以下方式将表格DOM中的HTML5按钮进行分类：

  $（'＃example'）。DataTable（{
 dom：'Bfrtip'，
按钮：[
'copyHtml5'，
'excelHtml5'，
 'csvHtml5'，
'pdfHtml5'
] 
}）; 
  

但是我想要某个地方可以在表DOM外附加一个按钮作为导出excel for specific table。

解决方案

通过 构造函数 ，您可以将按钮元素放置在所需的任何容器中。如果要将按钮放在表外的< div id =buttons>< / div> 元素中，请执行此操作

  var buttons = new $ .fn.dataTable.Buttons（table，{
 buttons：[
'copyHtml5'，
'excelHtml5'，
'csvHtml5'，
'pdfHtml5'
] 
}）container（）。appendTo（$（'纽扣'））; 
  

演示 - > https://jsfiddle.net/qoqq3okg/

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

I have multiple tables on my web page and each one is a DataTable, it is working fine.

I want to enable the export to excel functionality on each of the datatable but the button should be outside the table DOM (and each table should have its own button to export).

I can genrate the HTML5 button inside the table DOM using:

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

But i want someway by which i can attach a button outside the table DOM to act as a export to excel for specific table.

解决方案

Initialize each tables buttons via a constructor, by that you can place the button elements in any container you want. If you want to place the buttons in a <div id="buttons"></div> element outside the table, do this

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

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

I dont know your multiple tables setup, but now you just have to insert some elements along each <table> element and inject buttons for each table into that element as described above.

这篇关于DataTable导出按钮外面的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！