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

精美的开关仍然呈现在搜索框的顶部，但是使用简单的复选框可以解决此问题，因此我只需要在开关中找出引起这种情况的样式即可