2015-07-12 69 views
1

我正在创建一个自定义的手风琴和手风琴的内容(上下滑动一个)里面有一个表(datatables)。很显然,默认情况下手风琴内容div(datatables table wrapper)是隐藏的,但是一旦显示datatables表工具不起作用。你可以访问这个demo of mine并看到真正的问题,第一部分是问题出在哪里,点击按钮和表格会显示出来。第二部分是一个工作表,其中父div(datatables表的包装)未隐藏。datatables datatable工具无法正常工作时,父div有datatables表里面隐藏

任何帮助,线索,想法,建议,建议非常感谢。谢谢!

+0

你的意思是说,当你点击'显示隐藏的div'时间隐藏div将显示并打开div'不隐藏div'将关闭 –

+0

请参阅演示网站,第一部分是手风琴喜欢的东西(csv,excel,pdf,pdf,csv)无法正常工作,第二部分(具有蓝色边框的部分)是一个可用的示例(csv,excel,pdf,复制)正在工作。 –

回答

1

使用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(); 
}); 
+0

有趣的..但可悲的是我得到这个错误“未捕获TypeError:无法读取属性'fnResizeButtons'为null”任何想法或线索? –

+0

@CodeDemon,刚刚复制了整个网站 - http://serverstatus.megamitch.ph/test/ - 也使用了jQuery 1.11.1,dataTables 1.10.6,tableTools 2.2.4 - 并且它可以与隐藏表一起使用,如果我如上所述。你正在按照上面的方式来做?你确定你没有错别的地方,使用另一个ID隐藏表或类似的?如果'TableTools.fnGetInstance('example')'返回null'/'undefined',则表示没有带id示例的表。 – davidkonrad

+0

谢谢你,它现在的作品:) –

0

第一个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" 
     } 

}); 

}); 

或进行功能调用它,每当ü需要

+0

可悲的是,不工作 –

+0

@ CodeDemon你在控制台上得到任何错误 –

+0

控制台上没有错误 –

2

我已经与引导标签类似的问题以及与此想出了:

$('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建议?

+0

是的,官方的例子 - > https://www.datatables.net/extensions/tabletools/api#fnResizeButtons所以它应该也会失败,除了闪光灯按钮应该重置,即使表本身不需要调整大小。已经复制了整个演示,它也适用于'DataTable()'... – davidkonrad