아약스 요청이 완료되면 열의 크기가 조정되지 않습니다.

Question

DataTables 그리드와 함께 Ajax 데이터 소스를 사용하고 있지만 열의 크기가 자동으로 조정되지 않고 가로 스크롤이 너무 효과적이지 않습니다.

어떻게 수정합니까?

이 코드를 사용하고 : false로 높은 값 (150 % 등) 및 bAutoWidth sScrollXInner로 설정함으로써 해결

self.dataTableGrid = self.grid.dataTable({ 
    'bServerSide': true, 
    'sAjaxSource': self.grid.data('loadaction'), 
    'sPaginationType': 'bootstrap', 
    'bProcessing': true, 
    'sScrollX': "100%", 
    'sScrollXInner': "110%", 
    'bScrollCollapse': true, 
    'oLanguage': { 
     'sUrl': self.grid.data('gridtranslation') 
    }, 
    'bAutoWidth': true, 
    'bDeferRender': true, 
    'fnInitComplete': function() { 
     this.fnAdjustColumnSizing(true); 
    }, 
    'aoColumns': [{ 
       'sName': 'Name', 
       'mData': 'Name', 
       'bSearchable': true, 
       'bSortable': true, 
       'sWidth': '300px' 
      }, 
      { 
       'sName': 'Address', 
       'mData': 'Address', 
       'bSearchable': false, 
       'sWidth': '300px', 
       'bSortable': true, 
       'mRender': function (data, type, full) { 
        return data + ', ' + full.Number.toString(); 
       } 
      }, 
      { 
       'sName': 'City', 
       'mData': 'City', 
       'bSearchable': false, 
       'bSortable': true 
      }] 
}); 

Answer 1

문제. 또한 fnInitComplete는 필요하지 않습니다. 여기

최종 코드 :

self.dataTableGrid = self.grid.dataTable({ 
'bServerSide': true, 
'sAjaxSource': self.grid.data('loadaction'), 
'sPaginationType': 'bootstrap', 
'bProcessing': true, 
'sScrollX': "100%", 
'sScrollXInner': "150%", 
'bScrollCollapse': true, 
'oLanguage': { 
    'sUrl': self.grid.data('gridtranslation') 
}, 
'bAutoWidth': false, 
'bDeferRender': true, 
'aoColumns': [{ 
      'sName': 'Name', 
      'mData': 'Name', 
      'bSearchable': true, 
      'bSortable': true, 
      'sWidth': '300px' 
     }, 
     { 
      'sName': 'Address', 
      'mData': 'Address', 
      'bSearchable': false, 
      'sWidth': '300px', 
      'bSortable': true, 
      'mRender': function (data, type, full) { 
       return data + ', ' + full.Number.toString(); 
      } 
     }, 
     { 
      'sName': 'City', 
      'mData': 'City', 
      'bSearchable': false, 
      'bSortable': true 
     }] 

});