DataTable с фиксированным столбцом, не выглядящим хорошо

Question

Я попытался сделать первый столбец таблицы данных фиксированным, и я мог бы это сделать, первый столбец статичен при использовании прокрутки, проблема в том, что заголовок выглядит прозрачным, поэтому, когда Я прокручиваю вправо, я вижу содержимое элементов td ниже первого столбца, хотя он отлично работает для тела таблицы.

Например: Отель является первыми колонками и Total Pasajeros является вторым столбцом, когда я прокручиваю справа я могу увидеть Общую Pasajeros ниже отеля, и так далее ...

Это код, который я использовал, что я могу исправить?

<script type="text/javascript"> 
     $(function() { 
     $('#hoteles').DataTable({ 
      scrollY: "450px", 
      scrollX: true, 
      paging: false, 
      fixedColumns: { 
       leftColumns: 1 
      } 
     }); 
     }); 
    </script> 

Answer 1

Не видя JS, где вы создаете свой стол, немного сложно измерить.

Пара вещей приходит на ум. Вы можете попробовать позвонить:

var table = $('#hoteles').DataTable();  
table.columns.adjust().draw(); 

это будет пересчитывать расположение столбцов. См.: https://datatables.net/reference/api/columns.adjust()

Еще одна вещь, на которую вы можете обратить внимание - это дать этому первому столбцу больше пространства для работы. В свойствах таблицы можно определить столбцы с классами, как это:

"columns": [ 
      { "title": "Hotel", "class": "nowrap", "width": "15%;"}, 
      { "title": "Total Pasajeros", "class": "center" }, 
      { "title": "Col3", "class": "nowrap", "width": "5%;" }, 
      { "title": "Col4" }, 
      { "title": "Col5", "class": "nowrap" } 
     ] 

См: https://datatables.net/reference/option/columns

Answer 2

У меня была такая же проблема, вот решение, которое я сделал, сначала добавьте .fixed-row в контейнер (не таблица), а также использовать загрузочный стол для загрузки:

function bs_tableAdapter(){ 
      var tableContainer = $('.fixed-row table'); 
      var calculateWidth = 0; 
      tableContainer.each(function(e,n){ 
       var clone = $(n).clone(true); 
       var pos = $(n).position(); 
       var tmp = 0; 
       clone.find('th').not(':eq(0)').remove(); 
       clone.find('tbody tr').each(function(){ 
        $(this).find('td').not('.heads').remove(); 
       }); 
       clone.addClass('fixed-row-clone'); 
       $(n).find('tr').each(function(){ 
        var elem = $(this).find('.heads').parents('.tab-pane').show().end(); 
        calculateWidth = elem.outerWidth() + 10; 
        elem.parents('.tab-pane').css('display',''); 
        if(tmp < calculateWidth){ 
         tmp = calculateWidth; 
        } 
       }); 

       clone.css({ 
        left: pos.left, 
        top: pos.top, 
        width: tmp 
       }); 

       clone.find('th,td').css({ 
        'width': tmp+'px', 
        'padding-right' : '0px' 
       }); 
       $('.fixed-row').append(clone); 
      }); 
     }