告诉数据表使用自定义按钮进行文件导出

Posted 2023-05-07

【中文标题】告诉数据表使用自定义按钮进行文件导出

【英文标题】：tell datatable to use custom button for file export

【发布时间】：2020-10-05 04:26:12

【问题描述】：

我有一个工作的 html/js 数据表示例 jsfiddle，它有两个用于导出数据的工作按钮； excel和csv。我这样声明我的数据表：

$('#example').DataTable( 
    dom: 'Bfrtip',
    columns: [
         data: 'name' ,
         data: 'surname' ,
         data: 'position' ,
         data: 'office' ,
         data: 'salary' 
    ],
    buttons: [
                  
                      extend: 'excelHtml5',
                      text: 'excel',
                      exportOptions:   modifier:   page: 'current'   
                  ,
                  
                      extend: 'csvHtml5',
                      text: 'csv',
                      exportOptions:   modifier:   page: 'current'   
                  
              ]
 );

在这种情况下会出现两个默认按钮。在我的 html 中，我有两个要连接到数据表的自定义按钮元素：

<button id='excelExport'>click this to export excel</button><button id='csvExport'>click this to export csv</button>

因此，当我单击“excelExport”按钮时，它会触发数据表导出 excel。我正在尝试让两个自定义按钮都能正常工作，这样我就可以将它们放置在具有不同样式的更具体的位置，而不是使用表格的默认导出按钮。

如何扩展我的数据表导出 excel 功能以使用 id=excelExport 的自定义按钮？ 过去，我使用自定义搜索栏进行表搜索时做过类似的事情。为此，我必须像这样扩展搜索功能：

 //set datatable to use custom search box
$('#bottomTableSearch').on('keyup change', function () 
    myBrandGapsTable.search(this.value).draw();
);  

有什么方法可以为我的 id=excelExport 按钮做同样的事情吗？喜欢：

//set datatable to use custom excel export button
$('#excelExport ').on('click', function () 
    myBrandGapsTable.export(excel); //???? pseudocode, trying to get this concept working
);  

Jsfiddle 和我的例子在这里：

https://jsfiddle.net/martinradio/c0wezht7/12/

【参考方案1】：

您可以像这样触发数据表按钮的点击事件：

 $("#excelExport").on("click", function() 
    $(".buttons-excel").trigger("click");
 );
 $("#csvExport").on("click", function() 
    $(".buttons-csv").trigger("click");
 );