jQuery JavaScript Datatables 列压缩/挤压在一起

Posted 2023-05-07

【中文标题】jQuery JavaScript Datatables 列压缩/挤压在一起

【英文标题】：jQuery JavaScript Datatables columns condense/squeeze together

【发布时间】：2012-06-05 02:25:15

【问题描述】：

好的，当我在页面上的隐藏元素中的表上加载数据表时，我发现了一个问题。我所拥有的是少数基于“选项卡”的页面，当时唯一可见的是活动选项卡，而在激活之前的所有其他选项卡都是display:none。当我手动调用一个选项卡作为主选项卡时，表或其列没有问题。只有当标签最初隐藏问题时，才会使用表的初始显示是问题。

我说初始显示是因为当我单击列标题对给定列进行排序时，表格似乎会自行更正，并且列不再挤压/压缩在一起。

这是我当前的数据表代码

$('#'+tableID).dataTable(

    "sPaginationType": "full_numbers",
    "bPaginate": false,
    "bFilter": false,
    "bAutoWidth": true,
    "sScrollY": tableY+"px",
    "bScrollCollapse": true,
    "oLanguage": 
        "sInfo": "Showing _END_ Events."
    ,
    "aaSorting": [[ 1, "asc" ]],
    "aoColumns": [
         null,
         null
       ]
);

我尝试指定列宽，例如：

"aoColumns": [
          "sWidth": "80%" ,
          "sWidth": "20%" 
       ]

这也不起作用。所以我现在被困住了，试图解决这个问题，但不确定从哪里/如何开始。

另外，为了争论，可以说我的表结构类似于..

<table>
   <thead>
     <tr><td></td><td></td></tr>
   </thead>
   <tfoot>
     <tr><td></td><td></td></tr>
   </tfoot>
   <tbody>
     <tr><td></td><td></td></tr>
     <tr><td></td><td></td></tr>
     <tr><td></td><td></td></tr>
   </tbody>
</table>

【问题讨论】：

您是否探索过此问题中给出的任何答案：***.com/questions/604933/…？接受的答案包括一个相关的数据表链接：datatables.net/examples/api/tabs_and_scrolling.html

在这篇文章之前和之后进行了更多的搜索。我最终找到了解决方案。我知道这与元素被隐藏的事实以及浏览器不考虑显示元素的宽度/高度等的方式有关：无。当然，我正在使用的系统的开发方式使得评估问题比它应该做的要困难一些，但最终它与 jquery ui 相关联并绑定到给出的正常方法之外的“tabs”事件我在其他地方找到的示例。

【参考方案1】：

我最终通过搜索解决了我自己的问题，并基于与 datatables/jquery ui 相关的 API 文档中给出的示例。

我的解决方案是绑定到 jquery ui 的 tab 事件，然后启动我的函数以根据选择的选项卡构建我需要的表。

$(document).ready(function() 
    $("#storage").bind('tabsselect', function(event, ui)
    
        if (ui.index === 1)
        
            tables.statistics("metrics", "metric");
        
    );
);