角度 7 - 在数据表中重新加载数据答案

【问题标题】：angular 7 - reload data in data table角度 7 - 在数据表中重新加载数据
【发布时间】：2019-08-08 03:23:12
【问题描述】：

我将 angular 7 与 angular-datatables 一起使用。我正在尝试定义一个“重新渲染”按钮以重新加载数据like in this example。

我不明白应该在渲染函数中放置什么：

我的 API 函数：

fn_getFavoriteTables() {

  this._getFavoriteTablesApiCall =  this.getFavoriteTablesService.getFavoriteTables(Number(localStorage.getItem('UserID')), Number(localStorage.getItem('BranchID'))).pipe(takeUntil(this.destroySubject$)).subscribe(x => {
        this.getFavoriteTables = x;
        this.dtTrigger.next();
    });

};

重新渲染功能：

rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        // Destroy the table first 

        dtInstance.destroy();


        // Call the dtTrigger to rerender again
        this.dtTrigger.next();
    });
}

ngOnDestroy(): void {
  console.log('ngDestroy');
  // Do not forget to unsubscribe the event
  this.dtTrigger.unsubscribe();
}

【问题讨论】：

标签： angular datatable refresh rerender

【解决方案1】：

这也可以这样做：

import { DataTableDirective } from 'angular-datatables';

dtElement: DataTableDirective;
dtInstance: Promise<DataTables.Api>;

rerender(): void  {
  this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
    dtInstance.ajax.reload()
  });
}

【讨论】：

我已经尝试过这个解决方案，但它找不到命名空间 DataTables.Api。我已经导入了 DatatablesModule 以及 types/datatablesnet 并且什么都没有...我正在使用 9.0.2 版的数据表

【解决方案2】：

找到对我有用的答案： this is the source site

 rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        // Destroy the table first 
        //debugger;
        var table = $('#favoriteTable').DataTable();

        $('#tableDestroy').on('click', function () {
            table.destroy();
        });

        dtInstance.destroy();

        this.fn_getFavoriteTables();

    });
}

【讨论】：

【解决方案3】：

您可以使用 DataTable destroy() API 删除表格并重新使用 dtTrigger 再次呈现表格。请检查以下链接。

https://l-lin.github.io/angular-datatables/#/advanced/rerender

【讨论】：