为什么我的datatable Fixed标头不起作用/

Question

我正试图使我的数据表Thead成为一个粘性表，但当我尝试固定头时，它不起作用。我已经尝试过position: fixed; , top: 0;，并试图用css修复它，但当a完成这个操作时，它在firefox中的工作效果与预期的一样，但在chrome edge opera中却没有达到预期的效果。

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

这是我的ajax代码。

Answer 1

我曾试图在数据表中修复我的thead。但是这个数据表把它固定在页面顶部，就像这样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，一个数据表扩展，可以是：

• 在捆绑包中下载：在下载生成器中；或
• 它可以作为单独的文件包含在你的页面上。FixedHeader的文件：CSS、JS

此功能内置于扩展中，不需要使用CSS等单独操作。以下是它的初始化方式：

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

或者，在构建数据表后，可以使用new关键字和$.fn.dataTable.FixedHeader函数添加数据表：

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