Javascript 使用自定义滚动实现数据表固定标题

我在我的应用程序中使用materialize数据表，使用它我实现了固定头功能。这对于默认的页面滚动条工作正常

HTML代码：

<div id="tblContainer" class="material-table z-depth-3 hoverable">
  <table id="myTable" class="highlight"></table>
</div>

$(document).ready(function(){
 var data2 = {
   "results": [{"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1",
"Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}
   ]
 };

 $('#myTable').dataTable({
         data: data2.results,
        "order": [],
        "bSort": false,
        "bInfo": false,
        "paging": false,
        "searching": false,
        columns: [
          { data: 'Name', title: "Name" },
          { data: 'Amount', title: "Amount" },
          { data: 'Profit', title: "Profit" },
          { data: 'Loss', title: "Loss" },
          { data: 'Age', title: "Age" },
          { data: 'Address', title: "Address"},
          { data: 'Loss', title: "Loss" },
          { data: 'Age', title: "Age" },
          { data: 'Address', title: "Address"}
        ],
        "columnDefs": [
           { "width": "200px", "targets": [0] },
           { "width": "100px", "targets": [1] },
           { "width": "100px", "targets": [2] },
           { "width": "100px", "targets": [3,6] },
           { "width": "100px", "targets": [4,7] },
           { "width": "200px", "targets": [5,8] }
        ],
         "fixedHeader": {
           header: true
         }
    });
});

<div class="row">
  <div class="col s8 m5">
    <div id="tblContainer" class="material-table z-depth-3 hoverable">
    <table id="myTable" class="highlight"></table>
  </div>
  </div>
</div>

#myTable_wrapper {
  overflow-x:auto;
}

但当我为表格设置宽度并使用自定义滚动时，这意味着固定标题不会根据滚动而改变

在上面的代码中，我像这样更改了我的HTML部分，并添加了这个css。但固定标题不起作用

HTML代码：

<div id="tblContainer" class="material-table z-depth-3 hoverable">
  <table id="myTable" class="highlight"></table>
</div>

$(document).ready(function(){
 var data2 = {
   "results": [{"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1",
"Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}
   ]
 };

 $('#myTable').dataTable({
         data: data2.results,
        "order": [],
        "bSort": false,
        "bInfo": false,
        "paging": false,
        "searching": false,
        columns: [
          { data: 'Name', title: "Name" },
          { data: 'Amount', title: "Amount" },
          { data: 'Profit', title: "Profit" },
          { data: 'Loss', title: "Loss" },
          { data: 'Age', title: "Age" },
          { data: 'Address', title: "Address"},
          { data: 'Loss', title: "Loss" },
          { data: 'Age', title: "Age" },
          { data: 'Address', title: "Address"}
        ],
        "columnDefs": [
           { "width": "200px", "targets": [0] },
           { "width": "100px", "targets": [1] },
           { "width": "100px", "targets": [2] },
           { "width": "100px", "targets": [3,6] },
           { "width": "100px", "targets": [4,7] },
           { "width": "200px", "targets": [5,8] }
        ],
         "fixedHeader": {
           header: true
         }
    });
});

<div class="row">
  <div class="col s8 m5">
    <div id="tblContainer" class="material-table z-depth-3 hoverable">
    <table id="myTable" class="highlight"></table>
  </div>
  </div>
</div>

#myTable_wrapper {
  overflow-x:auto;
}

---

我在这里附上了我的两个示例JSFIDLE。如何在materialize数据表中实现自定义scoll条的固定头？

显然datatables的固定头根本不支持scoll-x。我一两个月前就试过了，但找不到解决办法。阅读主题

然而，我通过改变页面设计解决了这个问题。我没有使用固定的标题。但是将我的表格放在div的顶部，这意味着没有搜索框、分页或表格顶部的任何内容。就像您的第一个JSFIDLE示例一样

在那之后，我给了scrollY一个高度，我的标题就固定了。我的意思是

除掉

"fixedHeader": {
           header: true
         }

然后把这些线放进去

"ScrollX": true,
"scrollCollapse": true,
"sScrollY": 400

在JSFiddle上试试这个

此外，还可以使高度动态，如：

和功能

var calcDataTableHeight = function() {
h = $('#wrapper').height() - 150;
return h;
};

您可以使用这些数字，但不要忘记在启动函数之前声明它