DataTables TableTools 导出按钮不起作用答案

【问题标题】：DataTables TableTools export buttons not workingDataTables TableTools 导出按钮不起作用
【发布时间】：2014-07-29 18:23:44
【问题描述】：

使用下面的代码，我可以让TableTools 按钮显示在页面上，正确设置样式，甚至更改mouseover 事件上的鼠标图标，但是导出功能不起作用。当我单击按钮时，什么也没有发生。甚至不会收到错误消息。

在用户点击“搜索”按钮之前，页面上不存在正在使用的 DataTable 和 TableTools 插件。完成此操作后，Ajax 调用将提取相关数据并创建DataTable。同样，程序的这部分工作正常，但是当我单击“导出”按钮（CSV、Excel、PDF）时……什么也没有发生。

jQuery

    $.ajax({
        type: 'GET',
        url: '@Url.Action("PensgcReport", "Home")',
        data: { inputArray: inputArray },
        traditional: true,
        success: function (data) {
            //Unpack return object into 2D array
            var array = [];
            $.each(data, function (key, value) {
                var tempArray = [];
                $.each(value, function(key, value) {
                    tempArray.push(value);
                });
                array.push(tempArray);
            });

            console.log(array);
            $('#ReportTable').dataTable({
                "bDestroy" : true,
                "aaData": array,
                "aoColumns": headers,
                "bFilter": false,
                "bPaginate": false,
                "bLengthChange": false,
                "bFilter": false,
                "bSort": false,
                "bInfo": false,
                "aaSorting": [],
                "oLanguage": {
                    "sSearch": "Filter results:"
                },
                "sDom": 'T<"clear">lfrtip',
                "tableTools": {
                    "sSwfPath": "Content/media/copy_csv_xls_pdf.swf",
                    "aButtons": 
                    [
                            {
                                'sExtends': 'csv',
                                "sFileName": "PENSGC_Report_" + new Date() + ".csv",
                                'mColumns': [0, 1]
                            },
                            {
                                'sExtends': 'xls',
                                "sFileName": "PENSGC_Report_" + new Date() + ".xls",
                                'mColumns': [0, 1]
                            },
                            {
                                'sExtends': 'pdf',
                                "sFileName": "PENSGC_Report_" + new Date() + ".pdf",
                                'mColumns': [0, 1]
                            },
                    ]
                }
            });
        }
    })

HTML

这是页面加载时呈现的 HTML（没什么特别的）

    <table id="ReportTable" class="pretty">

    </table>

文件夹结构

【问题讨论】：

它似乎正在链接/寻址到 .swf 文件。你能用完整的url而不是相对的url来测试改变“sSwfPath”吗？
更改为 http://localhost:56789/Content/media/copy_csv_xls_pdf.swf 仍然得到相同的结果
您的环境是基于 Unix 的吗？可能是权限？
只需在 Windows 7 机器上的 Visual Studio 中运行它。您认为问题在于.swf 文件的可访问性吗？
我曾经遇到过同样的问题。这发生在使用 Datatables 1.8 时，我必须下载一个名为 TableTools 的额外插件并指向这些 .swf 文件，它才能工作。在 html 中，我还必须包含。你用的是什么版本？

标签： javascript jquery html datatable tabletools

【解决方案1】：

将swf路径改为：

"sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"

【讨论】：

【解决方案2】：

 var table = $('#mytable').dataTable({ YOUR OPTIONS});
       var tableTools = new $.fn.dataTable.TableTools(table, {
               "buttons": ["copy",
                                  "csv",
                                  "xls",
                                  "pdf",{ "type": "print", "buttonText": "Print me!" } ],
                                  "sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf" });
           $(tableTools.fnContainer()).prependTo('#mytable_wrapper');

【讨论】：

请避免仅使用代码的答案，并提供代码解释。