jQuery DataTable在Bootstrap标签页中列宽度配置不生效问题求助

问题原因 #

Bootstrap 非激活状态的标签页默认是display: none隐藏状态，DataTable 初始化时无法计算隐藏容器的实际宽度，导致自定义列宽配置仅对默认显示的第一个标签页生效。

解决方案 #

只需做两处修改即可解决：

1. 关闭 DataTable 自动列宽计算，强制应用你自定义的列宽规则
2. 标签页切换完成后触发列宽重计算，让刚显示的表格重新适配宽度

具体修改代码 #

1. 修改 DataTable 初始化配置

在renderDatatable方法的配置项中新增autoWidth: false：

var renderDatatable = function(tableId, data) {
    euffnDataTable = $("#" + tableId).DataTable({
        autoWidth: false, // 新增此行，关闭自动列宽计算
        columns: [{ data: "id", width: "20%",
                render: function(data, type, row) { 
                    if (type == 'display') {
                        return '<input type="checkbox" id="sel_' + row.id + '" class="editor-active template_checkbox" />';
                    }
                    return data;
                },
                className: 'selectFlow',
            },
            { data: "text", width: "80%" },
        ],
        // 其余原有配置保持不变即可
        data: data,
        dom: "Bfrtip",
        ordering: true,
        pageLength: 3,
        order: [ [0, "asc"] ],
        createdRow: function(row, data, dataIndex) {
            $(row).attr("template-id", data.id);
        }
    });
}

2. 修改标签页切换回调

将原来的draw()调用替换为columns.adjust()，仅针对当前激活的标签页内的表格做重计算：

// TAB click event
$('.myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // 获取当前激活标签页内的表格，重新调整列宽
    $($(e.target).attr('href')).find('.bptable').DataTable().columns.adjust();
});

修改完成后所有标签页内的表格都会正确应用20%/80%的列宽规则。

内容的提问来源于stack exchange，提问作者Jagadheesh