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

【问题标题】：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/

【问题讨论】：

标签： javascript html jquery datatable

【解决方案1】：

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

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

【讨论】：