1

我开发了一个使用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");
            }
        });

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

4

2 回答 2

0

它应该可以运行 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/

于 2019-01-18T13:26:13.837 回答
0

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

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

谢谢。

于 2019-01-21T13:09:45.023 回答