Question

需要从我的自定义按钮调用csv按钮。

<button value="Export report to Excel" class="button-default datatable-csv" type="button" id="ExportReporttoExcel">
                <span>Export report to Excel</span>
            </button>

我希望从上面的按钮中获得相同的功能，而不是从Datatable按钮调用它。

在Datatable中寻找一些配置更改，以便我可以调用我的自定义按钮将表记录导出为csv。

var table=$('#tableId').DataTable( {
    "paging":   true,
    "info":     true,
    "searching": true,      
    ,buttons: true
});


$("#SEARCH").on("keyup search input paste cut", function() {
    table.search(this.value).draw();
});

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

获得如下所示的输出，但我只需要一个按钮。

Answer 1

最后我找到了解决方案。

在Datatable配置中，我添加了单击事件以触发按钮。

buttons: [
        { 
            extend: 'csv',
        }
    ]

$("#ExportReporttoExcel").on("click", function() {
    table.button( '.buttons-csv' ).trigger();
});

这对我来说很好，感谢您的评论和答案

Answer 2

dataTables导出按钮默认情况下使用.buttons-excel，.buttons-pdf，.buttons-csv等签名类进行了丰富。利用这个：

$('#ExportReporttoExcel').on('click', function() {
  $('.buttons-excel').click()
});

Answer 3

如果您尝试触发另一个按钮的click事件并且您正在使用jQuery（根据您的标签），您可以使用

<button onclick="$('#ExportReporttoExcel').click()">Click me</button>

这将选择id为＆＃34; ExportReporttoExcel＆＃34;的元素。并使用jQuery触发单击。

Answer 4

说您有自己的按钮

<a href="javascript:;" style="some button style" class="button_export_excel">Export Excel</a>

并且您的表正在使用以下代码；

$(document).ready(function () {
    var table = $('#example').DataTable({
        "paging": false,
        "info": false,
        searching: false,
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excelHtml5'
            }
        ]
    });
});

然后您要做的就是在下面使用此代码：

$('#example').DataTable({
        "paging": false,
        "info": false,
        buttons: [
            {
                extend: 'excel'
            },
            {
                extend: 'csv'
            },
        ]
    });
$('.button_export_excel').click(() => {
    $('#example').DataTable().buttons(0,0).trigger()
})

0,0指向excel，如果您要指向csv，则执行0,1。

如何从自定义按钮调用Datatable csv按钮

4 个答案: