我正在使用DataTables，TableTools显示2个表。我使用Easy Tabs jQuery plug-in作为我的菜单，我在不同的标签上显示2个表。由于按钮的元素为display: none，因此没有高度/宽度，因此Flash按钮的大小不正确，并且您无法单击0x0元素。
当标签可见时，我需要使用TableTools fnResizeButtons()方法调整按钮的大小。
通过CSS隐藏制表符（div）：
#tabcontent2, #tabcontent3, #tabcontent4,{
display: none;}
这是我的fnResizeButtons脚本和初始化DataTables＆amp; TableTools：
/**Begin script to resize buttons when div made visible *******************/
$("#tabcontent1, #tabcontent2").tabs( {
"show": function(event, ui) {
var jqTable = $('table.display', ui.panel);
if ( jqTable.length > 0 ) {
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();
} //end if
} //end
} //end "show": function(event, ui) {
} ); //end $("#tabcontent1, #tabcontent2").tabs( {
} ); //end $(document).ready(function()
/**Begin Initialisation oTable**************/
var oTable = {};
$(document).ready( function () {
oTable = $('#claims').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
}, //end <a href="/ref#oLanguage">oLanguage</a>
"sPaginationType": "full_numbers",
// initialize Table Tools
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
// setting SWF path
"sSwfPath": ["swf/copy_csv_xls_pdf.swf"],
// buttons
"aButtons": [
{ "sExtends": "copy",
"bFooter": false
}, // end sExtends
{ "sExtends": "print",
"bFooter": false
}, // end sExtends
{ "sExtends": "csv",
"bFooter": false
}, // end sExtends
{ "sExtends": "xls",
"bFooter": false
}, // end sExtends
{ "sExtends": "pdf",
"bFooter": false,
"sPdfOrientation": "landscape"
} // end sExtends
] //end aButtons
} //end oTableTools
} ); //end #example .dataTable
} ); //end $(document).ready(function()
/**Begin Initialisation froi table****************************/
var froiTable = {};
$(document).ready( function () {
froiTable = $('#froi').dataTable( {
"bPaginate": false,
"bFilter": false,
"bSort": false,
// initialize Table Tools
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
// setting SWF path
"sSwfPath": ["swf/copy_csv_xls_pdf.swf"],
// buttons
"aButtons": [
"print",
"pdf"
] //end aButtons
} //end oTableTools
} ); //end #froi .dataTable
} ); //end $(document).ready(function()
这是菜单和div的代码：
<div id="tabs" class="menu"> <!--Start menu -->
<ul>
<li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;" title="" id="tablink1" >Tabcontent 1</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;" title="" id="tablink2" >Tabcontent 2</a></li>
<li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;" title="" id="tablink3">Tabcontent 3</a></li>
<li><a href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');" onclick="return false;" title="" id="tablink4" >Tabcontent 4</a></li>
</ul>
</div> <!--End menu -->
<div id="tabcontent1">
<!--Code for Table goes here -->
</div> <!--End Tabcontent 1-->
<div id="tabcontent2">
<!--Code for Table goes here -->
</div><!--End Tabcontent 2 -->
<div id="tabcontent3">
</div><!--End Tabcontent 3-->
<div id="tabcontent4">
</div><!--End Tabcontent 4-->
我相信我的问题在于脚本在div显示时调整按钮大小（fnResizeButtons脚本）。
我错过了什么？
答案 0 :(得分：3)
解决!!!!!问题出在ZeroClipoard.js的getDOMObjectPosition中。这试图确定位置＆amp; Flash影片附加到的元素的尺寸。问题是使用过的.width＆amp; .offsetWidth不适用于不可见元素。更改功能以检查可见性。如果不可见性将元素克隆到可见的临时窗外200px，则在克隆和放大器上进行维度检索。然后摧毁临时div和amp;克隆的元素。解决方案：在DataTables论坛上。
getDOMObjectPosition: function(obj) {
var info = Object();
// get absolute coordinates for dom element
if ($(obj).is(":visible")){ //obj.widht and obj.offsetWidth only work on visible elements
info = {
left: 0,
top: 0,
width: obj.width ? obj.width : obj.offsetWidth,
height: obj.height ? obj.height : obj.offsetHeight
};
} else {
//clone the object into a div outside of the window
var tempDiv = $('<div id="__ZeroClipBoard_Object_Temp" style=\"position:absolute; left:-2000px\"></div>');
var objClone = $(obj).clone();
objClone.appendTo(tempDiv).appendTo($('body'));
//get the info needed
info = {
left: 0,
top: 0,
width: objClone.width ? objClone.width : objClone.offsetWidth,
height: objClone.height ? objClone.height : objClone.offsetHeight
};
//destroy the temporary objects
objClone.remove();
tempDiv.remove();
}
if ( obj.style.width != "" )
info.width = obj.style.width.replace("px","");
if ( obj.style.height != "" )
info.height = obj.style.height.replace("px","");
while (obj) {
info.left += obj.offsetLeft;
info.top += obj.offsetTop;
obj = obj.offsetParent;
}
return info;
};
这解决了这个问题，我不相信这是解决问题的正确方法，但它有效......
答案 1 :(得分：1)
我刚调试了这个并找到了一个简单的答案，根本不需要攻击ZeroClipboard。
问题出在这段代码var jqTable = $('table.display', ui.panel);
该函数正在寻找一个<table>，其类display是我没有的。一旦我将其更改为我正在使用的类，它就开始使用提供的代码。
这是我的整个解决方案，不需要对ZeroClipboard进行黑客攻击：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // This is the tab show code for Twitter Bootstrap
var jqTable = $('table.table', $(e.target).attr("href"));
if ( jqTable.length > 0 ) {
var oTableTools = TableTools.fnGetInstance( jqTable[0] );
if ( oTableTools != null && oTableTools.fnResizeRequired() ){
jqTable.dataTable().fnAdjustColumnSizing();
oTableTools.fnResizeButtons();
} //end if
}
});
答案 2 :(得分：0)
这里有许多复杂的解决方案，这对于工作来说很重要（即没有高度：0px和宽度：0px）是在数据表尝试绑定到元素的时刻不能隐藏包含元素。如果你想要隐藏某些东西你必须在数据表之后它被绑定（启动）
答案 3 :(得分：0)
这对我有用：
$(document).ready(function() {
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust().draw();
} );
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var tableInstances = TableTools.fnGetMasters(), instances = tableInstances.length;
while (instances--)
{
var dataTable = tableInstances[instances];
if (dataTable.fnResizeRequired())
{
dataTable.fnResizeButtons();
}
}
});
});