javascript - 使数据表列在单击按钮时调整大小

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 方法来调整列宽。