Flash PDF按钮在多个jQuery选项卡中的DataTables TableTools中不起作用
我正在使用DataTables，TableTools显示2个表。我正在使用我的菜单，并在不同的选项卡上显示两个表。由于按钮的元素为display:none，因此没有高度/宽度，因此无法正确调整闪烁按钮的大小，也无法单击0x0元素 当选项卡可见时，我需要使用调整按钮大小的方法 选项卡div通过CSS隐藏：Flash PDF按钮在多个jQuery选项卡中的DataTables TableTools中不起作用,jquery,jquery-plugins,datatables,tabletools,Jquery,Jquery Plugins,Datatables,Tabletools,我正在使用DataTables，TableTools显示2个表。我正在使用我的菜单，并在不同的选项卡上显示两个表。由于按钮的元素为display:none，因此没有高度/宽度，因此无法正确调整闪烁按钮的大小，也无法单击0x0元素 当选项卡可见时，我需要使用调整按钮大小的方法 选项卡div通过CSS隐藏： #tabcontent2, #tabcontent3, #tabcontent4,{ display: none;} 以下是我的fnResizeButtons脚本以及初始化DataT
#tabcontent2, #tabcontent3, #tabcontent4,{
display: none;}
/**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 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-->
我错过了什么？解决了！！！！！问题出在ZeroClipoard.js的getDOMObjectPosition中。这将尝试确定Flash电影所附加到的元素的位置和尺寸。问题是使用的.width和.offsetWidth对不可见元素不起作用。更改该功能以检查可见性。如果不可见，请将元素克隆到可见的temp div 200px外部窗口中，然后在克隆上执行维度检索，然后销毁temp div和克隆的元素。解决方案：在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;
};
这解决了问题，我不相信这是解决问题的正确方法，但它是有效的…解决了！！！！！问题出在ZeroClipoard.js的getDOMObjectPosition中。这将尝试确定Flash电影所附加到的元素的位置和尺寸。问题是使用的.width和.offsetWidth对不可见元素不起作用。更改该功能以检查可见性。如果不可见，请将元素克隆到可见的temp div 200px外部窗口中，然后在克隆上执行维度检索，然后销毁temp div和克隆的元素。解决方案：在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;
};
这就解决了问题，我不相信这是解决问题的正确方法，但它是有效的…我只是调试了一下，找到了一个简单的答案，根本不需要破解 问题在于这段代码var jqTable=$'table.display'，ui.panel 函数正在寻找一个具有我没有的显示类的。一旦我将其更改为我正在使用的类，它就开始使用提供的代码 以下是我的全部解决方案，无需对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
}
});
我只是调试了一下，找到了一个简单的答案，根本不需要破解 问题在于这段代码var jqTable=$'table.display'，ui.panel 函数正在寻找一个具有我没有的显示类的。一旦我将其更改为我正在使用的类，它就开始使用提供的代码 以下是我的全部解决方案，无需对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
}
});
这里有很多复杂的解决方案，重要的是，没有高度：0px和宽度：0px是为了在datatables尝试绑定到元素时不隐藏包含的元素。如果您想隐藏某些内容，则必须在datatables绑定启动后执行此操作这里有许多复杂的解决方案，重要的是这项工作不具有高度：0px和宽度：0px，以便在datatables尝试绑定到元素时不隐藏包含的元素。如果您想隐藏某些内容，则必须在datatables绑定启动后执行此操作这对我来说很有效：
$(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();
}
}
});
});
这就是我的工作原理：
$(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();
}
}
});
});
在var jqTable=$'table.display'，ui.panel之后；发出警报alertjqTable.length。结果是什么？@MaVRoSCy当div变为可见时，我启用脚本调整按钮大小，它甚至不初始化TableTools。当我禁用脚本时，按钮会出现，但只在“可见”选项卡上工作。@MaVRoSCy脚本也不允许数据表初始化。我只是注意到我不能对我的列进行排序。也许jsfidle会更有用。我想我正在做一些事情……在var jqTable=$'table.display'，ui.panel；发出警报alertjqTable.length。结果是什么？@MaVRoSCy当div变为可见时，我启用脚本调整按钮大小，它甚至不初始化TableTools。当我禁用脚本时，按钮会出现，但只在“可见”选项卡上工作。@MaVRoSCy脚本也不允许数据表初始化。我只是注意到我不能对我的列进行排序。也许jsfidle会更有用。我想我正在做一些事情。。。