如何检测浏览器宽度变化并触发DataTable列宽调整？代码报错求助

首先咱们先理清楚你遇到的核心问题：

• 你混用了DataTables的旧API（dataTable()）和新API（DataTable()），旧API的fnAdjustColumnSizing()方法在新API实例上调用会直接报错
• 你需要批量处理页面上所有DataTable实例，在浏览器窗口尺寸变化时统一触发列宽调整

问题根源拆解 #

你之前的代码用$('#tableID').dataTable()（小写d）初始化，返回的是jQuery对象；而现在你用的是$('.table').not("#TableID").DataTable()（大写D），这是DataTables的新API，返回的是DataTables专属的API实例。两者的方法体系不兼容，旧的fnAdjustColumnSizing()属于旧API范畴，新API对应的列宽调整方法是columns.adjust()。

正确实现方案 #

方案1：初始化时保存所有实例，批量调用

初始化阶段把所有创建的DataTable实例存入数组，后续resize事件中遍历触发调整，逻辑更清晰可控：

// 全局存储所有DataTable实例
let allDtInstances = [];

$(document).ready(function() {
    // 初始化指定的#tableID（如果仍需保留这个实例）
    if ($('#tableID').length) {
        allDtInstances.push($('#tableID').DataTable({
            "sScrollY": "400px",
            "bPaginate": true,
            "bAutoWidth": false
        }));
    }

    // 初始化其他.table元素（排除#TableID）
    $('.table').not("#TableID").each(function() {
        allDtInstances.push($(this).DataTable({
            stateSave: true,
            columnDefs: [
                { "targets": [7], "visible": false },
                { "targets": [8], "visible": false } // 补全你未写完的配置项
            ]
        }));
    });

    // 监听窗口resize事件
    $(window).on('resize', function() {
        // 批量给每个DataTable实例调整列宽
        allDtInstances.forEach(function(dt) {
            dt.columns.adjust().draw(false); 
            // draw(false)表示只调整列宽，不重绘整个表格，提升性能
        });
    });
});

方案2：直接获取所有DataTable实例（更简洁）

如果不想手动保存实例，也可以在resize事件中直接获取页面上所有通过新API初始化的DataTable实例：

$(document).ready(function() {
    // 先完成所有DataTable的初始化
    $('#tableID').DataTable({
        "sScrollY": "400px",
        "bPaginate": true,
        "bAutoWidth": false
    });

    $('.table').not("#TableID").DataTable({
        stateSave: true,
        columnDefs: [
            { "targets": [7], "visible": false },
            { "targets": [8], "visible": false }
        ]
    });

    // 监听窗口resize
    $(window).on('resize', function() {
        // 自动获取所有DataTable实例并调整列宽
        $.fn.dataTable.tables({ api: true }).columns.adjust().draw(false);
    });
});

关键细节说明 #

• columns.adjust()：这是DataTables新API中专门用于列宽调整的方法，会根据当前容器的宽度重新计算并适配列宽
• draw(false)：可选参数，传入false可以避免表格重绘，只完成列宽调整，能有效提升窗口 resize 时的性能
• API兼容性：如果你仍在使用旧版DataTables（1.10之前），才需要用fnAdjustColumnSizing()；现在的新版本都推荐用新API的columns.adjust()

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