jQuery DataTables 插件修复了被覆盖的标题

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']]            
    });

头部偏移量是这样设置的；

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
    });        

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