单击按钮使数据表列调整大小

Question

我希望能够将所有列的大小调整为它们的内容。

我正在使用此代码

button.addEventListener ("click", function() {
    $("#table_id").DataTable().columns.adjust().draw();
});

但是它什么也没做。

这是我的数据表初始化：

// DataTable
var table = $('#table_id').DataTable({
    colReorder: true,
    scrollX: false,
    "autoWidth": false,
    "iDisplayLength": 10,
    "aLengthMenu": [
        [10, 25, 50, 100, 200, 500, -1],
        [10, 25, 50, 100, 200, 500, "All"]
    ],
    deferRender: false,
    'dom': 'ZBfrltip',
    buttons: ['copy', 'csv',
        {
            extend: 'colvis',
            prefixButtons: ['colvisRestore']
        }
    ],

    columnDefs: [{
        targets: '_all',
        visible: true
    }, {
        width: 200,
        targets: '_all'
    }],
});

问题可能来自CSS，但删除时发生了事件：

table-layout:fixed;
width:100%;

什么都没有改变

Answer 1

在向表中添加数据之后，可以将autoWidth: true与columns.adjust() API方法一起使用来调整列宽。

Answer 2

希望这可以帮助您解决问题。

1. 从数据表代码中删除autowidth:false。
2. 也删除table-layout:fixed; width:100%;。