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

Question

我正在使用JQuery的DataTables插件，我的问题基本上在于我的数据表有许多列并且（视觉上）超出其容器的边界（div标签）。然后我隐藏了一些在这一点上无关紧要的列。但是表的宽度并没有自己调整大小（让我们说它的父母的witdh）。我尝试使用

fnAdjustColumnSizing()

创建数据表后的

函数，但它似乎不起作用（我也尝试用fnDraw（）重绘表）。我也尝试给出一些初始参数，以便在每列上获得更小的尺寸

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

但它抛出一个错误，因为我必须“打开”bRetrieve参数（我后来做了，但它不起作用，它只是阻止弹出错误）。 所以...技术上我想在隐藏一些列之后使我的数据表更小。

提前致谢。

Answer 1

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

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

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

Answer 2

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

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

Answer 3

正如OlivierH所提到的，这对我来说是工作：

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