使用jQuery向Angular Datatable DOM添加自定义HTML元素失效如何解决

• 执行逻辑顺序颠倒：rerender方法中先执行了插入按钮的操作，随后立即销毁Datatable实例并触发重新渲染，刚插入的按钮会被新渲染的DOM节点直接覆盖，最终不会保留。
• DOM操作时机错误：插入按钮的代码执行时，Datatable还未完成全部DOM渲染，class为toolbar的容器尚未挂载到页面DOM树中，jQuery选择器无法匹配到对应节点，插入操作自然无效。控制台执行时Datatable已经完成渲染，因此可以正常插入。

最简单的适配方案是使用Datatable自带的drawCallback回调，该回调会在Datatable每次渲染完成后自动执行，此时toolbar容器已存在，插入操作不会被后续渲染覆盖。

修复后代码 #

ngOnInit(): void {
  this.dtOptions = {
    pagingType: "full_numbers",
    pageLength: 10,
    processing: true,
    dom:"<'row'<'col-sm-6 col-md-3'l><'col-md-3 col-sm-6 toolbar'><'col-sm-12 col-md-6'f>>" +
    "<'row'<'col-sm-12'tr>>" +
    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
    // 新增drawCallback回调，渲染完成后插入按钮
    drawCallback: () => {
      $('div.toolbar').html("<button class='btn btn-primary'>My Button</button>");
    }
  };  
  ///load data code into datatable
  this.rerender();
}

ngAfterViewInit(): void {
  this.dtTrigger.next();
}

ngOnDestroy(): void {
  this.dtTrigger.unsubscribe();
}

rerender(): void {
  this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
    dtInstance.destroy();    
    this.dtTrigger.next();
  });    
}

如果后续需要给按钮绑定Angular的点击等事件，不要使用jQuery直接插入HTML，改用Angular的Renderer2动态创建节点插入，或者使用Angular Datatable官方的buttons拓展配置，避免事件脱离Angular变更检测上下文。

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