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

Question

我有一个工作的 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/

Answer 1

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

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