如何在隐藏列后调整 JQuery/Datatable 的大小
我正在使用 JQuery 的 DataTables 插件，我的问题基本上在于我的数据表有很多列并且（视觉上）超出了其容器（div 标签）的范围。然后，我隐藏了一些此时不相关的列。但是表格的宽度不会自行调整大小（假设其父级的宽度）。我在创建数据表后尝试使用该
fnAdjustColumnSizing()
函数，但它似乎不起作用（我还尝试使用 fnDraw() 重新绘制表格）。我也尝试给出一些初始参数，以便在每列上获得较小的大小
$("#reportTable").dataTable({"aoColumns":[{sWidth:"10%"},{sWidth:"10%"},{sWidth:"10%"}]});
，但它会引发错误，因为我必须“打开” bRetrieve 参数（我后来做了，但它不起作用，它只是防止弹出错误）。 所以...从技术上讲，我想在隐藏一些列后使我的数据表变小。
提前致谢。
i'm using the DataTables plugin for JQuery, my problem basically lies in the fact that my datatable has to many columns and (visually) gets out of the bounds of its container (a div tag). I then hide some of the columns that are, at this point, irrelevant. But the width of the table just does not resize it self (let's say to its parent's witdh). I tried using the
fnAdjustColumnSizing()
function after creating the datatable but it doesn't seems to work (i also tried redrawing the table with fnDraw()). I tried as well to give some initial parameters in order to get a smaller size on each column
$("#reportTable").dataTable({"aoColumns":[{sWidth:"10%"},{sWidth:"10%"},{sWidth:"10%"}]});
but it throws an error since i have to "turn on" the bRetrieve parameter (which i did later on, but it didn't work, it just prevent the error to popup).
So... tecnically i want to make my datatable smaller after some columns are hidden.
Thanks in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
解决方案实际上比我想象的要简单。使用谷歌浏览器中的“检查元素”功能，我发现，当调用“datatable()”数据表的方法时，数据表API根据显示列数所需的空间使用固定宽度。大约是 1947 像素左右。因此，您无法使用简单的 css 更改此设置，因为数据表使用的固定宽度具有更高的优先级。
我找到的解决方案是在隐藏列后使用“width”jquery的方法：
因为它直接在表元素中更改宽度属性。
The solution was actually simpler than I thought. Using the "inspect element" feature in google chrome I found that, when calling "datatable()" datatables's method, datatables API used a fixed width based on the space needed to display the amount of columns. It was something like 1947 pixels or so. Therefore, you cannot change this using simple css because the fixed width used by datatables had higher priority.
The solution I found was using "width" jquery's method after hiding the columns:
since it changes the width attribute directly in the table element.
正如 OlivierH 提到的，这对我来说是工作：
It is work for me as has been mentioned by OlivierH:
为了设置数据表中列的宽度，我使用 sClass 参数为列指定不同的类，然后使用 css 设置宽度。
如果数据中有一列，但您不希望它可见，请将 bVisible 设置为 false，它将不会渲染该列，而不是在渲染后尝试隐藏它。
To set the width of columns in datatables I give the columns different classes using the sClass parameter and then set the width using css.
If a column is in the data but you don't want it visible, set bVisible to false and it will not render the column rather than try to hide it after render.