当前位置: > > > jQuery - 让DataTables组件在隐藏显示、加载数据后重新调整列宽

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);
评论0