jQuery DataTables：页面加载时和调整大小后列的宽度不同

Question

$('#some-table').DataTable({
"language": {
    "url": "{{ asset('/js/plugins/lang.json') }}"
},
"ordering": false,
"scrollX": true,
"scrollCollapse": false,
"searching": false,
"processing": true,
"serverSide": true,
"scrollY": 400,
"ajax": {
    "url": "/ajax/url",
    "type": "POST",
    "data": function ( d ) {
        d.some_parametr = '123';
    }
},
"columns": [
    {data: 'some_category', name: 'table.some_category'},
    {data: 'day.1', name: 'table.day'},
    {data: 'day.2', name: 'table.day'},
    {data: 'day.3', name: 'table.day'},
    {data: 'day.4', name: 'table.day'},
    ...
    {data: 'day.30', name: 'table.day'},
    {data: 'day.31', name: 'table.day'},
],
"initComplete": function (settings, json) {
    var api = this.api();
    if ( json.extra ) {
        var stat_day;
        for (var i = 1; i < 32; i++) {
            stat_day = json.extra.stat.day[i];              
            $(".dataTables_scrollFootInner table tfoot tr").append($('<td>')
                .html(stat_day)
            );
        }                                           
    }
    // Sync TFOOT scrolling with TBODY
    $('.dataTables_scrollFoot').on('scroll', function () {
        $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
    });
}   

加载页面时，列边框不相同： 更改浏览器窗口大小后 - 所有列对齐：

如何使页面加载时，表格的列对齐了？

Answer 1

试试这个：

columnDefs: [
    { width: 200, targets: 0 }    // this will set width of first column
],
fixedColumns: true   // this will set the column width to fixed

Answer 2

就我而言，这个问题的正确解决方案是在初始化后使用重绘表：api.draw（）;

"initComplete": function (settings, json) {
var api = this.api();
if ( json.extra ) {
    var stat_day;
    for (var i = 1; i < 32; i++) {
        stat_day = json.extra.stat.day[i];              
        $(".dataTables_scrollFootInner table tfoot tr").append($('<td>')
            .html(stat_day)
        );
    }                                           
}
// Sync TFOOT scrolling with TBODY
$('.dataTables_scrollFoot').on('scroll', function () {
    $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
});

api.draw();

}