javascript - 使用自定义滚动条实现数据表固定标题

Question

我在我的应用程序中使用物化数据表，我使用它实现了固定的 header 功能。这适用于默认页面滚动条。

Fixed Header with default scroll bar

HTML 代码:

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

JS代码:

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

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

Fixed Header with custom scroll bar

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

HTML 代码:

<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>

CSS 代码:

#myTable_wrapper {
  overflow-x:auto;
}

我在这里附上了我的两个示例 JSFiddle。如何在物化数据表中实现自定义scoll bar的固​​定表头？

Answer 1

显然数据表的固定 header 根本不支持 scoll-x。我在一两个月前尝试过，但找不到解决方案。阅读话题here

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

之后，我给scrollY一个高度，我的header就固定了。我的意思是;

摆脱

"fixedHeader": {
           header: true
         }

并用这些行代替。

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

在 JSFiddle 上试试这个

Also, you can make the height dynamic, like:

"sScrollY": calcDataTableHeight(),

和函数

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

你可以玩数字，但不要忘记在启动函数之前声明它。