使数据表列在按钮单击时调整大小答案

【问题标题】：Make datatable columns resize on button click使数据表列在按钮单击时调整大小
【发布时间】：2018-07-27 07:58:02
【问题描述】：

我希望能够根据内容调整所有列的大小。

我正在使用此代码

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%;

没有任何变化

【问题讨论】：

如果您保留引用table 并在按钮单击处理程序table.DataTable().columns.adjust().draw() 上使用相同的引用？
我也试过了，但结果是一样的。我不明白是什么阻碍了调整大小

标签： javascript jquery css datatables

【解决方案1】：

您可以在向表格添加数据后使用autoWidth: true 和columns.adjust() API 方法来调整列宽。

【讨论】：

我尝试使用 autoWidth : true 但列仍然不适合内容。我试图将初始列大小定义删除为无效
你试过 DataTable().destroy() 然后用 autoWidth: true 重新初始化数据表

【解决方案2】：

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

从您的数据表代码中删除 autowidth:false。
也删除table-layout:fixed;width:100%;这个。

【讨论】：