Кнопка Flash PDF не работает в DataTables TableTools на нескольких вкладках jQuery
Я использую DataTables, TableTools отображают 2 таблицы. Я использую плагин Easy Tabs jQuery для своего меню и отображаю 2 таблицы на разных вкладках. Так как элемент кнопок display: none и, следовательно, не имеет высоты / ширины, кнопки Flash не могут быть правильно измерены, и вы не можете нажать на элемент 0x0.
Мне нужно использовать метод TableTools fnResizeButtons() для изменения размера кнопок, когда вкладка становится видимой.
Вкладки (div) скрыты с помощью CSS:
#tabcontent2, #tabcontent3, #tabcontent4,{
display: none;}
Вот мой скрипт для 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()
Вот мой код для меню и divs:
<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).
Что мне не хватает?
4 ответа
РЕШИТЬ!!!!! Проблема в getDOMObjectPosition файла ZeroClipoard.js. Это пытается определить положение и размер элемента, к которому прикреплен Flash-фильм. Проблема в том, что используемые.width & .offsetWidth не работают на невидимых элементах. Измените функцию, чтобы проверить видимость. Если элемент невидимости клонирует элемент в временное окно div div 200px за пределами видимого окна, тогда выполните поиск размеров для клона, а затем уничтожьте как временный элемент 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;
};
Это решает проблему, я не уверен, что это правильный способ исправить это, но это работает...
Я только что отладил это и нашел простой ответ, который вообще не требует взлома 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
}
});
Вот что сработало для меня:
$(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();
}
}
});
});
Здесь много сложных решений, что важно для того, чтобы это работало (т. е. не имеет height:0px и width:0px), чтобы элемент не был скрыт в момент времени, когда таблицы данных пытаются привязаться к элементу. Если вы хотите что-то скрыть, вы должны сделать это ПОСЛЕ таблиц данных, это связано (инициировано)