隐藏列后如何调整 JQuery/Datatable 的大小答案

【问题标题】：How to resize a JQuery/Datatable after hiding columns隐藏列后如何调整 JQuery/Datatable 的大小
【发布时间】：2011-07-03 20:22:26
【问题描述】：

我正在使用 JQuery 的 DataTables 插件，我的问题基本上在于我的数据表有很多列并且（视觉上）超出了其容器的边界（一个 div 标签）。然后我隐藏了一些在这一点上不相关的列。但是表格的宽度并不会自行调整大小（假设是其父级的 witdh）。我尝试使用

fnAdjustColumnSizing()

创建数据表后的函数，但它似乎不起作用（我也尝试使用 fnDraw() 重绘表）。我也尝试提供一些初始参数，以便在每列上获得更小的尺寸

$("#reportTable").dataTable({"aoColumns":[{sWidth:"10%"},{sWidth:"10%"},{sWidth:"10%"}]});

但它会引发错误，因为我必须“打开” bRetrieve 参数（我后来这样做了，但它不起作用，它只是防止错误弹出）。所以......从技术上讲，我想让我的数据表在隐藏某些列后变小。

提前致谢。

【问题讨论】：

错误是关于数据表无法重新初始化，因为数据表已经存在并且我正在传递一些新参数，我只是将 bRetrieve 作为 true 传递（bDestroy 也可以），因为我正在保存javascript var 中数据表的状态。这不是真正的解决方案，也不是问题。

标签： jquery resize width datatables

【解决方案1】：

要设置数据表中列的宽度，我使用 sClass 参数为列指定不同的类，然后使用 css 设置宽度。

如果数据中有一列但您不希望它可见，请将 bVisible 设置为 false，它不会渲染该列，而是在渲染后尝试隐藏它。

【讨论】：

即使我不知道我的表格的确切列数，它也能工作吗？我的表是通过从不同的 SQL 查询中检索数据来动态创建的，因此我无法确定我的表由多少列组成。我已经尝试过了，但它似乎没有隐藏任何列。

【解决方案2】：

解决方案实际上比我想象的要简单。使用谷歌浏览器中的“检查元素”功能，我发现在调用“datatable()”数据表的方法时，数据表 API 使用基于显示列数所需空间的固定宽度。大概是 1947 像素左右。因此，您无法使用简单的 css 更改此设置，因为数据表使用的固定宽度具有更高的优先级。我找到的解决方案是在隐藏列后使用“宽度”jquery的方法：

$("#reportTable").width("100%");

因为它直接在表格元素中更改宽度属性。

【讨论】：

我已经为此苦苦挣扎了好几个小时。非常感谢！顺便说一句，如果你不想让你的桌子填满它的容器，那么与$table.width('auto'); 一起工作很好。唯一的事情就是重载之前计算的宽度。
这在隐藏列后帮助我解决了一些意外行为。 ty

【解决方案3】：

正如 OlivierH 所说，这对我有用：

$('#your_datatable_selector').width('auto');

【讨论】：