多标签页循环初始化多个DataTable时出现重复初始化错误

嘿，这个重复初始化的问题我太熟了！DataTables最容易踩这个坑，尤其是在多标签页场景下。咱们一步步来解决：

问题根源 #

你每次调用formatTable()函数时，都会遍历所有.dt表格并尝试重新初始化它们——哪怕这些表格已经被DataTables处理过了。虽然你加了bRetrieve: true，但这个参数的作用是获取已存在的实例，而不是阻止重复初始化，所以还是会触发报错。

修复步骤 #

我们需要在初始化前先判断表格是否已经是DataTables实例，只对未初始化的表格执行初始化操作，已初始化的直接获取实例即可。

修改后的代码 #

// 先声明全局数组（如果之前没声明的话）
let _datatables = [];

function formatTable() {
    $('.dt').each(function () {
        let datatable;
        // 关键：先判断当前表格是否已经被DataTables初始化
        if ($.fn.DataTable.isDataTable(this)) {
            // 如果已初始化，直接获取实例
            datatable = $(this).DataTable();
        } else {
            // 如果未初始化，才执行初始化
            datatable = $(this).DataTable({
                dom: '<"pull-left"f><"pull-right"l>tip',
                scrollY: "400px",
                scrollX: "100%",
                paging: false,
                bInfo: false,
                searching: true,
                order: [[0, "asc"]],
                bRetrieve: true // 保留这个参数，确保能获取实例
            });
            // 只有新初始化的实例才加入数组，避免重复
            _datatables.push(datatable);
        }
        // 不管是新实例还是已存在的，都调整列宽
        datatable.columns.adjust();
    });
}

// 标签页切换时的处理（如果用的是Bootstrap标签页）
$('a[data-toggle="tab"]').on('shown.bs.tab', function () {
    // 切换标签页后，只需要调整当前激活标签页内表格的列宽，不用重新初始化
    $('.tab-pane.active .dt').each(function() {
        $(this).DataTable().columns.adjust();
    });
});

关键改动说明 #

• 添加初始化判断：用$.fn.DataTable.isDataTable(this)检查表格状态，从根源避免重复初始化操作。
• 优化数组存储：只把新初始化的实例加入_datatables，避免数组里出现重复实例导致后续操作混乱。
• 标签页切换优化：标签页切换时不再调用formatTable()，只对当前激活标签页的表格执行列宽调整，既提升性能又彻底规避重复初始化风险。

额外提示 #

如果你的页面加载时会多次触发formatTable()调用（比如某些异步操作完成后再次调用），这个判断逻辑也能有效阻止重复初始化的报错。

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