データテーブルの固定スクロールの固定ヘッダー

Question

固定ヘッダー機能を実装したアプリケーションで、マテリアライズデータテーブルを使用しています。これは、デフォルトのページスクロールバーでうまくいきます。

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を追加しました。しかし、固定ヘッダーは機能しません。

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

私はここに私の2例JSFiddleを添付しています。マテリアライズドデータテーブルのカスタムScoll Barの固定ヘッダを取得するにはどうすればよいですか？

Answer 1

明らかに、datatablesの固定ヘッダーはscoll-xをまったくサポートしていません。私は1〜2匹前に試みましたが、解決策を見つけることができませんでした。トピックを読むhere

しかし、私は私のページデザインを変更することでこれを解決することができました。私は固定ヘッダーを使用しませんでした。しかし、私のテーブルをdivの上に置いてください。これは、検索ボックスやページ設定やテーブルの上に何もないことを意味します。あなたの最初のJSFiddleの例と同じです。

その後、私はスクロールする高さを与え、私のヘッダーは固定されました。私の言いたいことは、

は

"fixedHeader": { 
      header: true 
     } 

を取り除き、代わりにこれらの行を入れます。

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

また、あなたが同様に、高さを動的にすることができますJSFiddle

でこれを試してみてください：

あなたが一緒にプレイすることができます

"sScrollY": calcDataTableHeight(), 

と機能

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

数字それを開始する前に関数を宣言するのを忘れないでください。