jQuery DataTables 插件固定 header 被覆盖

Question

我有一个使用 DataTable 插件的数据表。我已将标题、搜索框和页面列表固定到位，效果很好。表格标题偏离固定标题。

表的数据是用 Ajax 加载的，DataTable 是这样设置的；

table = $("#data-table").DataTable({
        dom: '<"dom_wrapper"fl>tip',            
        iDisplayLength: 100,
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],

        columnDefs: [
            { targets: [3, 4], orderable: false }
        ],            
        order: [[1, 'asc']]            
    });

header offset是这样设置的；

new $.fn.dataTable.FixedHeader(table, {
        header: true,            
        headerOffset: 195
    });

我已将 dom_wrapper 和相关控件设置为这样的样式；

div.dom_wrapper {
position: sticky;
top: 160px;
background: rgba(255, 255, 255, 1);
margin-bottom: 50px;
overflow: hidden;
}

div.dataTables_length {
background: rgba(255, 255, 255, 1);
width: 50%;
overflow: hidden;    
}

div.dataTables_filter {
background: rgba(255, 255, 255, 1);
width: 50%;
overflow: hidden;
}

控件和表头已正确固定到位。我遇到的问题是表格的内容在表格标题上方的控件前面和上方仍然可见，如下所示；

Answer 1

好的，经过一些摆弄，我已经大致解决了这个问题。这是一个整理 css 的案例 - 我在 ajax 调用后的“always”函数中实现了它。

 //enable sticky header
    $('div.dom_wrapper').css({
        'position': 'sticky',
        'top': '154px',
        'background': 'rgba(255, 255, 255, 1)',
        'padding-bottom': '30px',
        'margin-bottom': '44px'
    });

    new $.fn.dataTable.FixedHeader(table, {
        header: true,
        headerOffset: 184
    });        

花哨的开关仍然呈现在搜索框的顶部，但使用简单的复选框解决了这个问题，所以我只需要在开关中识别导致这种情况的样式