为什么我的数据表固定标题不起作用/

Question

我正在尝试使我的数据表 Thead 成为粘性表，但是当我尝试固定标题时它不起作用。我已经尝试过

position: fixed; , top: 0;

并尝试用 css 修复它，但是当完成此操作时，它在 Firefox 中可以按预期工作，但在 crome Edge Opera 中却不能按预期工作。

    "stateSave": false,
    "orderCellsTop": true,
    "fixedHeader": {
        header: true,
    },
    "columns": [
    {'data':'chk_select_header','orderable': false},

这是我的ajax代码。

Answer 1

我曾尝试在数据表中修复我的头部。但是这个数据表将该标题固定到页面顶部，如下所示 https://datatables.net/extensions/fixedheader/examples/options/simple.html 但我想粘在该数据表 div 上。我发现唯一的方法是使用下面的 CSS 方法

thead tr:first-child th {
    position: sticky;
    z-index: 12;
    top: 0;
    background: white;
}

或者

thead th {
    position: sticky;
    z-index: 12;
    top: 51px;
    background: white;
}

这是将数据表头粘贴到表头的最简单方法

Answer 2

FixedHeader，数据表扩展，可以是：

• 在此处捆绑下载：在下载生成器中；或
• 它可以作为单独的文件参考包含在您的页面上。 这里。 固定标题文件：CSS、JS

此功能内置在扩展中，无需使用 CSS 等进行任何单独的操作。 这是它的初始化方式：

$('#myTable').DataTable( {
    fixedHeader: true
} );

或者，在构建数据表后，可以使用

new

关键字和

$.fn.dataTable.FixedHeader

函数添加它：

var table = $('#myTable').DataTable();
new $.fn.dataTable.FixedHeader( table, {
    // more options
} );

Answer 3

fixedHeader: {
        header: true,
        headerOffset: $('#navbar').height()
    }

或

fixedHeader: {
        header: true,
        headerOffset: 120
    }

这就足够了

文档：https://datatables.net/extensions/fixedheader/examples/options/offset.html