のDataTable固定ヘッダは、スクロール可能なテーブル

Question

私は時間の短い期間のためのDataTableに取り組んできました

のために働いていないと私は2つの列を持つDataTableを持っている：

TableVehUsage = $("#TableVehUsage ").DataTable({ 
    data: [], 
    ordering: true, 
    paginate: false, 
    "info": false, 
    fixedHeader: {header: true}, 
    columns: [ 
     { data: "Vehicle", title: "Vehicle" }, 
     { data: "Serial", title: "Serial" } 
    ], 
    "columnDefs": [ 
     { 
      "targets": 0, 
      "render": function (data, type, full, meta) { 
       // If it is rendering the cell contents 
       if (type === 'display') { 
        switch (data) { 
         case "-": 
          return "-"; 
         default: 
          if (full.IsOnSale == true) 
           return '<span style="color:red" onclick="ToParentTab(' + full.Id + ')">' + data + '</span>'; 
          else 
           return '<span onclick="ToParentTab(' + full.Id + ')">' + data + '</span>'; 
        } 
       } 
       return (isNaN(data)) ? -1 : +data; 
      } 
     } }] 
}); 

私はいくつかの状況があるの際に、すべてのデータのドン」ページに収まり、ユーザーはすべての情報を見るためにスクロールする必要があります。私は私のjavascriptのラインfixedHeader: {header: true}とhtml内に追加してFixed Headerを使用しようとしました：？

<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css"> 

しかし、私のために働いていません:(

私が間違って何をやっている

Answer 1

私は助けになることがありDataTableのプラグインを発見し、それに関する情報はこれを使用してhttps://datatables.net/extensions/scroller/

にあり、私の定義は次のようになります。

var table1 = $('#example').DataTable({ paging: true,    
     scrollY:        200, 
     deferRender:    true, 
     scroller:       true }); 

は、私はそれで、キーと値のペアの唯一の「値」部分に別の変数にデータを追加してみてくださいhttps://jsfiddle.net/bindrid/oywvh1ek/6/

Answer 2

でjsFiddleを作りました。たとえば、 {"vehicle"： "Audi"}の場合、 の 'data'変数には[Audi]のみが含まれている必要があります。

以下のコードは私にとって完璧に機能しました。

  $("<your_table_name>").DataTable({ 
       data:data, 
       fixedHeader:true, 
       "scrollX": true, 
       "scrollY": "200px", 
       "scrollCollapse": true, 
       columns: [ 
         { title: 'Vehicle' }, 
         { title: 'Serial' } 
        ] 
      });