数据表即时调整大小 [英] Datatables on-the-fly resizing

问题描述

我正在使用奇妙的 DataTables jQuery 插件；http://datatables.net/ 添加了 FixedColumns 和 KeyTable 附加项.

I'm using the marvellous DataTables jQuery plug-in; http://datatables.net/ Added the FixedColumns and KeyTable extras.

现在，当窗口大小改变时，表格会很好地调整大小.但是，表格的包含 div 也可以通过 jQuery 动画调整宽度，我还没有找到用它调整表格大小的方法——它只是保持原始宽度不变.仅当我在页面加载之前更改代码中的 div 宽度时，表格才会正确调整大小.

Now the table does resize prettily when the window size is changed. However, the containing div of the table can also be resized in width by a jQuery animation, and I haven't found a way to resize the table with it-- it just stays stagnant in its original width. Only if I change the div width in the code before pageload, the table is resized correctly.

如何根据窗口宽度和包含的 div 宽度即时调整 DataTable 的大小?提前致谢！:-)

How can I make the DataTable resize on-the-fly according to both the window width and the containing div width? Thanks in advance! :-)

推荐答案

发生的事情是 DataTables 在初始化为计算值时设置表格的 CSS 宽度 - 该值以像素为单位，因此它获胜的原因不要通过拖动来调整大小.这样做的原因是当您更改分页时，停止表格和列(列宽也已设置)在宽度上跳跃.

What is happening is that DataTables is setting the CSS width of the table when it is initialised to a calculated value - that value is in pixels, hence why it won't resize with your dragging. The reason it does this is to stop the table and the columns (the column widths are also set) jumping around in width when you change pagination.

为了阻止 DataTables 中的这种行为，您可以将 autoWidth 参数设置为 false.

What you can do to stop this behaviour in DataTables is set the autoWidth parameter to false.

$('#example').dataTable( {
  "autoWidth": false
} );

这将停止 DataTables 将其计算出的宽度添加到表格中，让您的(大概) width:100% 单独存在并允许其调整大小.为列添加相对宽度也有助于阻止列弹跳.

That will stop DataTables adding its calculated widths to the table, leaving your (presumably) width:100% alone and allowing it to resize. Adding a relative width to the columns would also help stop the columns bouncing.

DataTables 中内置的另一个选项是设置 sScrollX 选项以启用滚动，因为 DataTables 会将表格设置为滚动容器的 100% 宽度.但您可能不想滚动.

One other option that is built into DataTables is to set the sScrollX option to enable scrolling, as DataTables will set the table to be 100% width of the scrolling container. But you might not want scrolling.

完美的解决方案是，如果我可以获得表格的 CSS 宽度(假设应用了一个 - 即 100%)，但不解析样式表，我看不到这样做的方法(即基本上我想要$().css('width') 返回样式表中的值，而不是像素计算值.

The prefect solution would be if I could get the CSS width of the table (assuming one is applied - i.e. 100%), but without parsing the stylesheets, I don't see a way of doing that (i.e. basically I want $().css('width') to return the value from the stylesheet, not the pixel calculated value).

这篇关于数据表即时调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！