DataTable фиксированный заголовок не работает для прокруткой таблицы

Question

Я работал с DataTables в течение короткого периода времени, и у меня есть 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; 
      } 
     } }] 
}); 

У меня есть некоторые ситуации, когда все данные Дон» t на странице, и пользователю необходимо прокрутить вниз, чтобы просмотреть всю информацию. Я пытался использовать Fixed Header, добавив к моему яваскрипту линии fixedHeader: {header: true} и в HTML:

<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

I? . нашел DataTable плагин, который может быть полезен информация на нем расположена на https://datatables.net/extensions/scroller/

Используя это, мое определение выглядит следующим образом:

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

Я сделал jsFiddle на https://jsfiddle.net/bindrid/oywvh1ek/6/

Answer 2

Попробуйте добавить данные в другой переменной с только «значение» части пары ключ-значение в нем. Например, в случае {«автомобиль»: «Ауди»}, , ваша переменная 'data' должна содержать только [«Audi»].

Этот код работал отлично для меня.

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