如何从公共JS给多页面DataTable追加配置，解决push调用报错问题

错误原因 #

• table是DataTable初始化后返回的实例对象，不是配置对象，本身不存在push方法
• 若公共JS加载时机早于页面DataTable初始化逻辑，table变量还未赋值为undefined，调用方法自然抛出类型错误

最优解决方案（零侵入原有页面代码） #

直接修改DataTable全局默认配置，所有页面初始化DataTable时会自动合并该配置，优先级低于页面单独传入的自定义配置，完全符合跨页面统一追加配置的需求。

公共JS中添加如下代码，必须保证公共JS加载时机早于所有页面的DataTable初始化代码：

// 全局合并DataTable默认配置
$.extend(true, $.fn.DataTable.defaults, {
    buttons: [
        {
            text:'Save as PDF',
            className: "btn btn-primary",
            extend: 'pdfHtml5',
            download: 'open',
        }
    ]
    // 其他需要全局追加的配置均可在此处添加
});

特殊场景解决方案（针对已初始化的DataTable实例动态加按钮） #

如果部分页面的DataTable已经初始化完成，需要动态追加按钮，可使用DataTable官方提供的实例方法操作，需要确保执行时实例已经创建完成：

// 先判断实例是否存在，避免报错
if (window.table && table instanceof $.fn.DataTable.Api) {
    table.button().add(null, {
        text:'Save as PDF',
        className: "btn btn-primary",
        extend: 'pdfHtml5',
        download: 'open',
    });
}

注意事项 #

• 确保项目已引入Buttons扩展对应的依赖资源，pdfHtml5还需要额外引入jszip、pdfmake相关依赖
• 原有页面配置中的dom已经包含B参数（buttons渲染位），如果其他页面的dom没有B，需要在全局配置中统一追加dom配置：dom: 'lBfrtip'

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