jQuery - 让DataTables组件在隐藏显示、加载数据后重新调整列宽
1,问题描述:
(1)有时我们需要在初始化时隐藏表格(display:none),然后在需要的时候再将其显示出来(这个在选项卡 tab 切换下比较常见)。这是可能会发现表格显示后,它的宽度或者内部列的宽度并不正确。
(2)又比如虽然表格一开始是显示的,但默认并不自动加载数据,而是通过 table.ajax.url('xxxx').load() 方法去手动加载。同样可能会发现表格显示后,它的宽度或者内部列的宽度并不正确。
2,解决办法
(1)我们可以通过调用表格对象的 columns.adjust() 方法来重新计算列的大小,确保布局正确。
注意:当上面问题发生时,我们手动改变下浏览器窗口大小,会发现布局有好了,这是因为 DataTables 自动在窗口 resize 事件上调用 columns.adjust() 方法
(2)如果表格显示后需要自动调整列的大小可以这么写:
//显示表格 $('#myTable').css('display', ''); //自动调整列宽 var table = $('#myTable').DataTable(); table.columns.adjust().draw();
(3)如果手动 ajax 加载数据后需要自动调整列的大小可以这么写:
var table = $('#myTable').DataTable(); table.ajax.url('data.txt').load(table.columns.adjust().draw);