1

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
            }]
});
4

1 に答える 1

3

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

});

于 2013-06-19T17:21:25.187 に答える