2

我正在使用 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()

这是我的菜单和 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 脚本）。

我错过了什么？

4

4 回答 4

3

解决了！！！！！问题出在 ZeroClipoard.js 的 getDOMObjectPosition 中。这试图确定 Flash-Movie 附加到的元素的位置和尺寸。问题是使用的 .width 和 .offsetWidth 不适用于不可见的元素。更改功能以检查可见性。如果不可见性将元素克隆到可见的窗口外 200px 的临时 div 中，则在克隆上进行维度检索，然后销毁临时 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; 
   };

这解决了问题，我不相信这是解决问题的正确方法，但它有效......

于 2013-09-20T15:25:59.163 回答
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
    }
});
于 2014-07-18T18:31:16.940 回答
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();
        }
    }
});
});
于 2017-04-10T08:51:49.250 回答
0

这里有很多复杂的解决方案，重要的是要使其工作（即没有 height:0px 和 width:0px ）是在数据表尝试绑定到元素时不隐藏包含元素。如果要隐藏某些内容，则必须在绑定数据表之后执行此操作（已启动）

于 2016-04-18T22:13:19.123 回答