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

jQuery JavaScript Datatables columns condense/squeeze together

本文关键字：在一起 压缩 JavaScript Datatables jQuery      更新时间：2023-09-26

好的，我在页面上隐藏元素中的表上加载数据表时发现问题。我拥有的是一些基于"选项卡"的页面，当时唯一可见的是活动选项卡，而激活之前的所有其他选项卡都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>

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

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

$(document).ready(function() {
    $("#storage").bind('tabsselect', function(event, ui)
    {
        if (ui.index === 1)
        {
            tables.statistics("metrics", "metric");
        }
    });
});
相关文章：