Question

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

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。但固定标头不起作用。

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

显然是数据表＆＃39;固定标题根本不支持scoll-x。我曾尝试过一两个月，但无法找到解决方案。阅读主题here

然而，我设法通过改变我的页面设计来解决这个问题。我没有使用固定的标头。但是把我的桌子放在div的顶部，这意味着没有搜索框或分页或桌面上的任何东西。就像你的第一个JSFiddle示例一样。

在那之后，我给了一个滚动的高度，我的标题变得固定了。我的意思是;

摆脱

"fixedHeader": {
           header: true
         }

并改为使用这些行。

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

在JSFiddle上试试这个

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

"sScrollY": calcDataTableHeight(),

功能

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

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

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

1 个答案: