datatables - ajax 请求完成时不调整列大小

Question

我在我的 DataTables 网格中使用 Ajax 数据源，但列没有自动调整大小，水平滚动也不起作用。

我该如何解决？

我正在使用这段代码：

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

});