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

}）;

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

1 个答案: