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

问题描述

我使用了奇妙的DataTables jQuery插件; http://datatables.net/ 添加了FixedColumns和KeyTable附加功能。

现在，当窗口大小更改时，表会优先调整大小。但是，表的包含div也可以通过jQuery动画调整大小，我还没有找到一种方法来调整表的大小 - 它只是停留在其原始宽度。只有在pageload之前更改代码中的div宽度，表格才能正确调整大小。

如何使DataTable根据窗口宽度和包含div宽度？提前致谢！ ： - ）

解决方案

正在发生的事情是DataTables在初始化为计算值时设置表的CSS宽度 - 该值是以像素为单位，因此为什么它不会通过拖动来调整大小。这样做的原因是，当您更改分页时，停止表格和列（列宽也设置）跳过宽度。

您可以做什么在DataTables中停止此行为将 autoWidth 参数设置为false。

  $（'＃example'）。dataTable（{
autoWidth：false 
}） ; 
  

这将停止DataTables将计算的宽度添加到表中，留下您的（大概）宽度：100％单独允许它调整大小。向列添加相对宽度也有助于停止列的弹跳。

DataTable内置的另一个选项是设置sScrollX选项以启用滚动，作为DataTables将表格设置为滚动容器的100％宽度。但是您可能不想滚动。

如果我可以获取表的CSS宽度（假设应用 - 即100％），但没有解析样式表，我没有看到这样的方式（即基本上我想要$（）。css（'width'）返回样式表中的值，而不是像素计算的值）。

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

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.

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

解决方案

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.

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

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

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.

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.

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).

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