簡體   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