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

问题描述

我有一个使用 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;
}

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

标签： jquerycssdatatables

好的，所以有些摆弄我已经对此进行了排序。这是一个整理 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
    });

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

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

问题描述

解决方案

推荐阅读