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 
     }] 

}）;