테이블이 업데이트 될 때 Datatable 헤더가 줄어 듭니다.

Question

"DataTable"테이블에 문제가 있습니다. 테이블을 새로 고치거나 업데이트 할 때 헤더가 정렬되지 않았습니다. 예가 아래 그림에 나와 있습니다.

표는 처음에 초기화되고 드롭 다운 필드에 배치됩니다. 그런 다음 함수를 지우고 테이블을 업데이트하고 테이블을 그립니다. 테이블이 업데이트되고 테이블이 놓여있는 드롭 다운 필드를 표시하는 버튼을 누르면 이미지 벨로우가 발생합니다. 업데이트 후에는 헤더가 자동으로 표준 너비로 수정됩니다.

HTML 부분 :

<table id="mainTable" class="dataTable" style="width:100%;"> 
    <thead bgcolor="#fd7e14" class="maintablehead"> 
     <th>Coin</th> 
     <th>Vol</th> 
     <th>% Change</th> 
     <th>Last price</th> 
    </thead> 
    <tbody id="mainTableBody"> 
    </tbody> 
</table> 

표 선언 부분 :

var a = $('#mainTable').DataTable({ 
data: dataInput, 
columns: [ 
    { data: "symbol" }, 
    { data: "vol" }, 
    { data: "change"}, 
    { data: "price" } 
], 
"columnDefs": [ 
    { "type": "any-number", targets: 1 }, 
    { "type": "any-number", targets: 2 }, 
    { "type": "any-number", targets: 3 }, 
    { "className": "dt-center", "targets": "_all" }, 
    { 
     targets:2, render: function (data, type, row) { 
      var color = 'black'; 
      if (data > 0) { 
       color = 'green'; 
      } 
      if (data < 0) { 
       color = 'red'; 
      } 
      if (data == 0) { 
       color = 'black'; 
      } 
      return '<span style="color:' + color + '">' + data + '</span>'; 
      } 
    } 
], 
"paging": false, 
"info": false, 
"order": [[0, "desc"]], 
"scrollY": "400px", 
"scrollCollapse": false, 
"auto-width": true, 
"fixedHeader": true, 
"language": { 
    "zeroRecords": "No symbol found on selected exchange", 
    "search": "Enter symbol:", 
}, 
"initComplete": function() { 
    $(document).on("click", " #mainTable tbody tr[role='row']", function() { 
     var id = $(this).children('td:first-child').text(); 
     document.getElementById("coin-name").innerHTML = id; 
     widget.onChartReady(function() { 
      var chart = widget.activeChart(); 
      chart.setSymbol(id); 
     }) 
    }); 
}, 
}); 

나는 코드를 다음과 같이 테이블 10 초마다 새로 고침.

var datatable = $('#mainTable').dataTable().api(); 
datatable.clear(); 
datatable.rows.add(dataInput); 
datatable.columns.adjust().draw(false); 

어떻게 이런 일이 발생하지 않도록 할 수 있습니까? 나는 datatable 포럼에서 많은 솔루션을 검색 및 시도했지만 아무 것도 작동하지 않습니다. thead의 너비를 100 %로 설정하는 것은 효과가 없습니다.

2 개의 테이블을 사용하고 있는데 모두 동일한 문제가 있습니다.

Answer 1

지우기 대신 datatable.empty()를 시도하십시오. 이것은 모든 요소 속성을 재설정하는 것처럼 보입니다.

Answer 2

scrollY 옵션으로 Scroller 확장을 사용하고 있으므로 columns.adjust() 대신 scroller.measure() API 메소드를 사용하십시오.

var datatable = $('#mainTable').DataTable(); 
datatable.clear(); 
datatable.rows.add(dataInput); 
datatable.scroller.measure().draw(false);