我已经阅读了 2 天这方面的内容,因此将所有这些内容放在一起,这是我的贡献。
我弄明白了,希望这对某人有用或对开发也有帮助。
由于表很大,我的数据表处于 DIV 和水平滚动状态。当设置了固定表头时,它被设置为 FIXED,并在 BODY 而非 div 内插入了一个新表。
我将它附加到 DIV 而不是 BODY 以便可以继承溢出规则。
文件:
dataTables.fixedHeader.min.js(搜索“appendTo”)
来自:
e.table().node().cloneNode(!1)).removeAttr("id").append(f).appendTo("body")
收件人:
e.table().node().cloneNode(!1)).removeAttr("id").append(f).appendTo(".dataTables_scroll")
现在它已附加到 datatables-created-div 中,与 dataTables_scrollHead 相同级别,dataTables_scrollBody 而不是单独搁置在主体上,无论溢出仍然显示/突出。
文件:
fixedHeader.bootstrap.min.css
来自:
table.dataTable.fixedHeader-floating{position:fixed !important}
到
table.dataTable.fixedHeader-floating{position:absolute !important}
或文件:
fixedHeader.dataTables.min.css
来自:
table.fixedHeader-floating{position:fixed !important;background-color:white;}
到
table.fixedHeader-floating{position:absolute !important;background-color:white;}
注意 CSS 和 JS 文件的缓存。
现在浮动的粘性行已经出现,但不合适并溢出。
让这个JS运行,检测fixedHeader-floating何时出现,不断调整它们以跟随水平滚动并粘在顶部。
setInterval(function(){
if($('.fixedHeader-floating').is(':visible')){
var myoffset = Math.round($(window).scrollTop() - $('#Detail2Container').position().top + $('.topbar').height() - 145);
var positionleft = $('.dataTables_scrollHeadInner').position();
$('.fixedHeader-floating').css({ 'top': myoffset, 'left': positionleft.left + 10 });
}
}, 50); //every 50ms
Detail2Container 是包装数据表的 DIV。
我不能使用 dataTables_wrapper 作为参考,因为同一页面中有一些。在我的页面中,我只有一个需要fixedHeader 的表,如果我需要2 个,那就很难了。不过有需要的时候我会处理的。
您可以根据自己的设计调整计算。
我需要 2 天时间来解决这个问题。所以我也想分享一下。