Question

好的我在我的页面上的隐藏元素中的表上加载数据表时发现了一个问题。我所拥有的是一些页面，这些页面是＆＃34; Tab＆＃34;基于，当时唯一可见的是活动标签，而当时激活的所有其他标签都是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>

Answer 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");
        }
    });
});

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

1 个答案: