Angular 9 Datatable Buttons扩展dt-button-collection追加到body末尾及导出报错

• • 全局多版本jQuery冲突是触发元素错位、导出报错的最核心原因
    angular.json的脚本配置中，先后加载了node_modules/jquery/dist/jquery.js（3.5.1版本）和src/assets/js/jquery-1.12.4.min.js（1.12.4老版本），后者会完全覆盖全局的$对象，导致DataTables Buttons的DOM挂载定位逻辑失效——原本应该绑定在按钮组容器上的dt-button-collection元素，会因为jQuery上下文不匹配，被异常追加到页面body末尾，同时所有绑定在按钮上的导出事件回调会因为jQuery对象版本不兼容触发报错。
• • 脚本加载顺序完全不符合依赖层级要求
    当前配置中，大量依赖jQuery的脚本（如nprogress.js、Bootstrap js、自定义业务js）都放在jQuery加载语句的前面执行，会直接触发依赖未定义的报错，导致DataTables的初始化流程被中断，按钮组件无法正常关联到表格的DOM结构。
• • 重复样式加载导致定位上下文失效
    配置中同时引入了npm包的Bootstrap CSS和本地路径的Bootstrap CSS，两套版本不一致的样式会互相覆盖，把DataTables按钮组容器的position: relative定位属性冲掉，导致弹出层找不到正确的父级定位参考，最终被追加到body节点下。
• • 版本匹配的隐性偏差
    虽然angular-datatables@9.0.2、datatables.net@1.10.21、datatables.net-buttons@1.7.0的版本本身是兼容的，但因为全局jQuery版本被老版本覆盖，实际运行时的jQuery 1.12.4达不到DataTables 1.10.21要求的jQuery 3.x运行标准，会直接触发API执行失败。

1. 清理冲突的重复资源 #

• 直接删除angular.json中src/assets/js/jquery-1.12.4.min.js这行加载配置，全局只保留一份来自npm包的jQuery 3.5.1版本，从根源上消除对象覆盖问题。
• 删除angular.json中重复引入的src/assets/css/bootstrap.min.css样式，只保留一份来自npm包的Bootstrap 4 CSS，避免样式互相覆盖。

2. 严格按照依赖优先级调整脚本加载顺序 #

把angular.json的scripts数组按以下顺序重排，所有依赖jQuery的脚本必须放在jQuery加载语句的后面：

• 第一层级（最前加载）：全局唯一的jQuery node_modules/jquery/dist/jquery.js
• 第二层级：jQuery生态依赖脚本，如jquery-ui、timepicker、Bootstrap js、自定义业务js、第三方插件js
• 第三层级：DataTables核心脚本 node_modules/datatables.net/js/jquery.dataTables.js
• 第四层级：DataTables Buttons相关扩展，包括dataTables.buttons.js、buttons.colVis.js、buttons.html5.js、buttons.print.js，以及导出必须的依赖jszip/dist/jszip.js、pdfmake/build/pdfmake.min.js、pdfmake/build/vfs_fonts.js

3. 补充按钮组件的定位配置 #

在原有的dtOptions的buttons配置块中，新增弹出层的容器绑定规则，明确指定按钮集合的挂载位置：

buttons: [
  {
    extend: 'collection',
    text: 'Export Data',
    className: 'exp_d_btn',
    // 新增配置：强制弹出层挂载到按钮组容器，不要全局追加到body
    popover: {
      position: 'bottom',
      container: '.dt-buttons'
    },
    buttons: [
      // 保留原有excel、pdf、csv的导出配置
    ]
  }
]

4. 补充自定义CSS修正定位上下文 #

在全局样式文件中增加强制规则，防止其他样式覆盖定位属性：

/* 给按钮组设置相对定位，作为弹出层的参考父级 */
.dt-buttons {
  position: relative !important;
}
/* 修正按钮集合弹出层的定位属性 */
.dt-button-collection {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1050 !important;
}

5. 运行验证 #

项目重启后，在浏览器控制台输入$.fn.dataTable.Buttons，如果能正常返回函数对象，说明加载流程正常；此时打开导出按钮的集合弹出层，会自动定位到按钮组下方，不会再跑到页面body末尾，点击导出按钮的报错也会同步消失。

内容的提问来源于stack exchange，提问作者S.H