使用下拉更改事件在 jquery 数据表中导出文件答案

【问题标题】：File export in jquery datatables using dropdown change event使用下拉更改事件在 jquery 数据表中导出文件
【发布时间】：2019-01-18 12:21:49
【问题描述】：

我使用JQuery Datatable Collections 开发了文件导出功能。当我点击一个按钮时，例如 PDF（见下图），它将 Datatable 导出为 PDF 文件。

这是我的代码。

buttons: [
   {
       extend: 'collection',
       text: 'Save & Column Visibility',
       autoClose: true,
       buttons: [
                   { text: 'Copy', extend: 'copyHtml5'},
                   { text: 'Excel', extend: 'excelHtml5'},
                   { text: 'CSV', extend: 'csvHtml5'},
                   { text: 'PDF', extend: 'pdfHtml5'},
                   { text: 'Print', extend: 'print' }

                ],
            fade: true,
   }
],

我的要求是在下拉更改事件而不是按钮单击事件上实现此功能。

这是我到目前为止所做的下拉代码。

$('<div class="pull-right">' +
        '<select id="dropdown" name="dropdown" class="form-control">' +
        '<option value="copy">Copy</option>' +
        '<option value="excel">Excel</option>' +
        '<option value="csv">CSV</option>' +
        '<option value="pdf">PDF</option>' +
        '<option value="print">print</option>' +
        '</select>' +
        '</div>').appendTo("#tbMenu_wrapper .dataTables_filter");
    $(".dataTables_filter label").addClass("pull-right");
});

这是我为测试目的创建的 Onchange 事件函数。

$(function () {

        $("#dropdown").change(function () {

            if ($(this).val() == "copy") {
                alert("From Copy");


            }
            else if ($(this).val() == "excel") {
                alert("From excel");

            }
            else if ($(this).val() == "csv") {
                alert("From csv");
            }
            else if ($(this).val() == "pdf") {
                alert("From pdf");
            }
            else if ($(this).val() == "print") {
                alert("From print");
            } else {
                alert("From else part");
            }
        });

当我单击下拉值并按照函数中指定的方式向我发出警报时，它工作正常。但是现在我应该在上面提到的代码中做什么，这将在下拉更改事件中为我提供文件导出功能？

【问题讨论】：

标签： javascript jquery asp.net-mvc datatables dropdown

【解决方案1】：

它应该可以运行 OOTB，您需要加载依赖项。

Buttons 提供的按钮类型将自动确定是否应根据浏览器的功能使用 HTML5 或 Flash 强烈建议您使用这些按钮类型特定的 HTML5 或 Flash 按钮类型。它们是：复制、csv、excel、 pdf。

这个例子展示了这四种按钮类型，加上打印，正在使用加载所有必需的依赖项。

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );

请参考：

https://datatables.net/extensions/buttons/examples/initialisation/export.html https://datatables.net/extensions/buttons/

【讨论】：

【解决方案2】：

我找到了我的问题的解决方案，我正在分享以供将来参考。只需将此行替换为alert("From Copy");

var table = $('#tbMenu').DataTable();
table.button('.buttons-copy').trigger();

谢谢。

【讨论】：