当ajax请求完成时，不会调整列的大小

Question

I'm using an Ajax data source with my DataTables grid, but the columns are not auto sized and the horizontal scrolling is not working too.

How do I fix this?

I'm using this code:

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

Problem solved by setting sScrollXInner to a higher value (like 150%) and bAutoWidth to false. Also, the fnInitComplete is not necessary.

Here is the final code:

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

});