实现具有自定义滚动的数据表固定标题

我在我的应用程序中使用了具体化数据表，使用该表实现了固定标题功能。这对于默认页面滚动条来说工作正常。实现具有自定义滚动的数据表固定标题

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。如何在物化数据表中实现自定义滚动条的固定标题？

来源

2017-04-06 SRI

显然datatables的固定头根本不支持scoll-x。我曾试过一两次飞蛾，但找不到解决办法。阅读主题here

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

之后，我给了一个高度来scrollY，我的头变得固定。我的意思是;

摆脱

"fixedHeader": { 
      header: true 
     }

，并把这些线来代替。

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

上的jsfiddle试试这个

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

"sScrollY": calcDataTableHeight(),

和功能

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

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

来源

2017-04-09 21:53:59

实现具有自定义滚动的数据表固定标题

回答

相关问题