ajax請求完成後，列不會調整大小

Question

我正在使用Ajax數據源和我的DataTables網格，但列不是自動調整大小的，而且水平滾動也不起作用。

我該如何解決這個問題？

我正在使用此代碼：

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

問題通過sScrollXInner設置爲較高的值（如150％）和bAutoWidth爲false解決。另外，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 
     }] 

}）;