繁体   English   中英

DataTables TableTools导出按钮不起作用

[英]DataTables TableTools export buttons not working

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

用户单击“搜索”按钮之前,页面上不存在TableTools插件正在使用的DataTable 完成此操作后,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路径更改为:

"sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"
 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');

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM