FixedHeader随表及浏览器大小自适应
文章目录
DataTables中有一个浮动表头的扩展FixedHeader,他的作用就是在浏览器滚动时使其表头能够浮动。
使用方法:
在引入js文件后,初始化一下命令:
1 | $(document).ready( function () { |
它的实现原理就是在表格形成后,复制一份表头覆盖在原来的表头上
这样初始化后是没有问题的,但是在改变浏览器大小之后,它就一直是默认的长度,不能自适应了。结局办法就是添加如下代码:
1 | var oFH = new $.fn.dataTable.FixedHeader( table ); $(window).resize(function(){ oFH._fnUpdateClones(true); oFH._fnUpdatePositions(); }); |
通过JS来监听浏览器窗口改变之后,表的结构已经自适应了,然后它再依据表头重新绘制一份
下面这段代码是BI系统中缩小sidebar后使其自适应
$('#sidebar-collapse').click(function(){
oFH._fnUpdateClones(true);
oFH._fnUpdatePositions();
});
解决办法参考这里
var fixedHeaders = [];
$('.table-fixed-header').each(function(){
fixedHeaders.push(
new FixedHeader(this, {
'offsetTop': 51 // offset for my bootstrap .navbar-fixed-top
})
);
});
$(window).resize(function(){
for(var i = 0; i < fixedHeaders.length; i++){
fixedHeaders[i]._fnUpdateClones(true); // force redraw
fixedHeaders[i]._fnUpdatePositions();
}
});