datatables datatable 工具在父 div 隐藏了 datatables table 时不起作用

Question

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

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

Answer 1

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

不隐藏example id时需要应用插件

如下所示

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

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

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

});

});

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

Answer 2

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

This is due to the inability of TableTools (or any DOM script) to find the height and width of an element which is hidden.

将您的代码更改为：

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

Answer 3

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

$('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 datatable 工具在父 div 隐藏了 datatables table 时不起作用

datatables datatable tools not working when the parent div has the datatables table inside is hidden

javascript

jquery

datatables

datatables-1.10