当父 div 具有隐藏的数据表表时，数据表数据表工具不起作用答案

【问题标题】：datatables datatable tools not working when the parent div has the datatables table inside is hidden当父 div 具有隐藏的数据表表时，数据表数据表工具不起作用
【发布时间】：2015-07-12 07:49:58
【问题描述】：

我正在创建一个自定义手风琴，并且在手风琴内容（向上和向下滑动的内容）内部有一个表格（数据表）。很明显，默认情况下手风琴内容 div（数据表表包装器）是隐藏的，但一旦显示数据表表工具就不起作用。您可以访问此demo of mine 并查看真正的问题，第一部分是问题所在，单击按钮将显示表格。第二部分是一个工作表，其中父 div（datatables 表的包装器）没有隐藏。

非常感谢任何帮助、线索、想法、建议、建议。谢谢！

【问题讨论】：

你的意思是说当你点击“显示隐藏的 div”时，隐藏的 div 将显示并打开 div '不是隐藏的 div' 将关闭
请查看演示站点，第一部分是手风琴之类的东西（它会向下滑动和向上滑动）并且数据表表格工具（复制、excel、pdf、csv）不起作用并且第二部分（带有蓝色边框的部分）是一个工作示例（csv、excel、pdf、副本）正在工作。

标签： javascript jquery datatables datatables-1.10

【解决方案1】：

我在引导选项卡上遇到过类似的问题，并想出了这个：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target_id = $(e.target).attr("href");
    var jqTable = $(target_id).find("table");
    var oTableTools = TableTools.fnGetInstance( jqTable[0] );
    if (oTableTools != null && oTableTools.fnResizeRequired()){
        /**
         *  A resize of TableTools' buttons and DataTables' columns is only required on the
         * first visible draw of the table
         */
        jqTable.dataTable().fnAdjustColumnSizing();
        oTableTools.fnResizeButtons();
    }
});

我已经使用DataTable() 而不是dataTable() 初始化了我的表，就像你正在做的那样。也许改变它并再次尝试@davidkonrad 的建议？

【讨论】：

是的，官方示例 -> datatables.net/extensions/tabletools/api#fnResizeButtons 所以它也应该可以正常工作，此外即使表格本身不需要调整大小，也应该重置 flash 按钮。已经复制了整个演示，它也适用于DataTable() ...

【解决方案2】：

使用fnResizeButtons() API方法，我相信是introduced just to solve this problem：

这是由于 TableTools（或任何 DOM 脚本）无法找到隐藏元素的高度和宽度。

将您的代码更改为：

$(".show").click(function(e){
   $(".container").slideToggle();
   var tableTools = TableTools.fnGetInstance('example');
   tableTools.fnResizeButtons();
});

【讨论】：

很有趣.. 但遗憾的是我收到了这个错误“未捕获的类型错误：无法读取 null 的属性 'fnResizeButtons'”任何想法或线索？
@CodeDemon，刚刚复制了您的整个站点 - serverstatus.megamitch.ph/test - 还使用了 jQuery 1.11.1、dataTables 1.10.6、tableTools 2.2.4 - 如果我这样做，它可以与隐藏表一起使用更多。您是否完全按照上述方式进行操作？您确定您没有在某处打错字，使用隐藏表的另一个 ID 或类似的？如果TableTools.fnGetInstance('example')返回null/undefined，表示没有id为example的表。

【解决方案3】：

第一个 html dom 加载那个时间插件没有获得示例 ID，因为它是隐藏的。

当示例 id 不隐藏时，您需要应用插件。

如下所示

    $(".show").click(function(e){

    $(".container").slideToggle();

    $('#example').dataTable( {
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
            "sSwfPath": "tabletools/swf/copy_csv_xls_pdf.swf"
        }

});

});

或创建一个函数并在需要时调用它

【讨论】：