[英]Flash PDF button not working in DataTables TableTools in multiple jQuery tabs
I am using DataTables, TableTools display 2 tables. 我正在使用DataTables,TableTools显示2个表。 I am using Easy Tabs jQuery plug-in for my menu and I am displaying 2 tables on different tabs. 我在菜单中使用Easy Tabs jQuery插件,并且在不同的选项卡上显示2个表。 Since the buttons' element is display: none
and thus has no height / width, the Flash buttons can't be correctly sized, and you can't click on a 0x0 element. 由于按钮的元素display: none
,因此没有高度/宽度,因此无法正确设置Flash按钮的大小,也无法单击0x0元素。
I need to use the TableTools fnResizeButtons() method for resizing the buttons when the tab is made visible. 当使选项卡可见时,我需要使用TableTools fnResizeButtons()方法来调整按钮的大小。
The tabs (divs) are made hidden through CSS: 标签(divs)通过CSS隐藏:
#tabcontent2, #tabcontent3, #tabcontent4,{
display: none;}
Here is my script for fnResizeButtons and to initialize DataTables & TableTools: 这是我的fnResizeButtons脚本,用于初始化DataTables和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()
Here is my code for the menu and divs: 这是我的菜单和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-->
I believe that my problem is in the script to resize buttons when div made visible (fnResizeButtons script). 我相信我的问题是在div可见时重新调整按钮大小的脚本(fnResizeButtons脚本)。
What am I missing? 我想念什么?
SOLVED!!!!! 解决了!!!!! The problem is in getDOMObjectPosition of ZeroClipoard.js. 问题出在ZeroClipoard.js的getDOMObjectPosition中。 This tries to determine position & dimension of the element the Flash-Movie is attached to. 这将尝试确定Flash-Movie附加到的元素的位置和尺寸。 The problem is the used .width & .offsetWidth do not work on invisible Elements. 问题是使用的.width和.offsetWidth在不可见元素上不起作用。 Alter the function to check for visibility. 更改功能以检查可见性。 If non-visibility clone the element into a temp div 200px outside window where visible, then do dimension-retrieval on clone & afterwards destroy both temp div & cloned element. 如果非可见性将元素克隆到可见窗口外部200px的temp div中,则对clone进行维度检索,然后销毁temp div和cloned元素。 Solution here: on DataTables forum. 这里的解决方案:在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;
};
This solves the problem, I am not convinced that this is the correct way to fix it, but it works... 这解决了问题,我不相信这是解决问题的正确方法,但是它可以工作...
I just debugged this and found an easy answer that doesn't require hacking ZeroClipboard at all. 我只是调试了一下,发现了一个简单的答案,根本不需要破解ZeroClipboard。
The problem was with this snippet of code var jqTable = $('table.display', ui.panel);
问题在于这段代码var jqTable = $('table.display', ui.panel);
The function is looking for a <table>
with a class of display
which I didn't have. 该函数正在查找具有我没有的display
类的<table>
。 Once I changed this to the classes I was using, it began working with the code as provided. 一旦将其更改为我正在使用的类,它将开始使用提供的代码。
Here's the entirety of my solution, no hacking of ZeroClipboard required: 这是我的解决方案的全部,不需要对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
}
});
lots of complicated solutions here, what is important for this to work ( ie not having height:0px and width:0px ) is for the containing element to not be hidden at the moment of time datatables tries to bind to the element. 在这里有许多复杂的解决方案,要使其有效(即没有height:0px和width:0px),重要的是要在数据表尝试绑定到元素时隐藏包含元素。 If you want to hide something you have to do it AFTER datatables it is bound ( initiated ) 如果要隐藏某些内容,则必须在数据表绑定(初始化)之后再进行处理
This is what worked for me: 这对我有用:
$(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();
}
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.