如何使用服务器端渲染更新角度数据表中的列数。 6.0.0 或更高版本

Question

我无法让我的角度数据表在重新渲染后显示新的列列表。我已按照文档中显示的示例进行重新渲染，并且可以让表格重新渲染。我能够操作某些功能，例如搜索和 pageLength，但由于某种原因，我无法更改我的列。

我有一个非常深的数据集，如果我一次渲染所有列，我的表格看起来很糟糕，所以我想让用户能够选择他们看到的列。

我什至愿意一次加载所有列，然后关闭和打开可见性，但我也无法影响可见性。

以前有人遇到过这个问题吗？

重新渲染函数：

rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
  dtInstance.destroy();
  // these work
  this.dtOptions.searching = true;
  this.dtOptions.pageLength = 2;
  // these do not
  this.dtOptions.columns = newColumnList;
  this.dtOptions.columns[some-index].visible = false;
  this.dtTrigger.next();
});}

初始 dtOptions：

this.dtOptions = {
  searching: false,
  pagingType: 'full_numbers',
  pageLength: 10,
  retrieve: true,
  serverSide: true,
  processing: true,
  language: {
    zeroRecords: 'Nothing Found'
  },
  ajax: (dataTablesParameters: any, callback) => {
    const payload = this.passFilterService.processPagination(this.filter, dataTablesParameters);
    this.http
      .post<any>(
        environment.api + '/things/list',
        {payload: payload}, {}
      ).subscribe(resp => {
        if (resp.data.data === null) {
          resp.data.data = 0;
        }
      callback({
        recordsFiltered: resp.data.totalCount,
        data: resp.data.data,
        recordsTotal: resp.data.totalCount
      });
    });
  },
  columns: this.tableColumns
};

初始列（有限字段）：

tableColumns = [
{
  title: 'Customer',
  data: 'Id',
  render: function(data) {
    return `<a href="/pass/` + data + `" class="cursor-pointer actionView" title="View">Action</a>`;
  }
}, {
  title: 'Created',
  data: 'createdAt',
  orderable: true,
  visible: true,
}, {
  title: 'Updated',
  data: 'updatedAt',
  orderable: true,
  visible: true,
}, {
  title: 'Disabled',
  data: 'isVoided',
  orderable: true,
  visible: true,
}
];

表实现：

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
</table>

Answer 1

我遇到了同样的问题，花了几个小时调试它，直到找到适合我的东西。我建议将 DT 配置分离成一个可以单独加载的独立对象。更新 DT 选项和任何其他配置后，您可以使用以下函数重新加载整个 DT，并相应地销毁和重新加载它；

async rerender(newSettings?: DataTables.Settings) {
    try {
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
            if (newSettings) {
                // FIX To ensure that the DT doesn't break when we don't get columns
                if (newSettings.columns && newSettings.columns.length > 1) {
                    dtInstance.destroy();
                    this.dtOptions = Promise.resolve(newSettings);
                    this.displayTable(this.dtTableElement);
                }
            }
        });
    } catch (error) {
        console.log(`DT Rerender Exception: ${error}`);
    }
    return Promise.resolve(null);
}

这个函数调用下面的函数来实际销毁DT并重新渲染它。

private displayTable(renderIn: ElementRef): void {
    this.dtElement.dtInstance = new Promise((resolve, reject) => {
        Promise.resolve(this.dtOptions).then(dtOptions => {
            // Using setTimeout as a "hack" to be "part" of NgZone
            setTimeout(() => {
                $(renderIn.nativeElement).empty();
                var dt = $(renderIn.nativeElement).DataTable(dtOptions);
                // this.dtTrigger.next();
                resolve(dt);
            });
        }).catch(error => reject(error));
    });
}

我从重建函数中删除了 dtTrigger 执行，因为它执行了两次。

dtTableElement 定义为@ViewChild('dtTableElement') dtTableElement: ElementRef;，其中 HTML 包含数据表上的相应引用：

<table #dtTableElement datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped row-border hover" width="100%"></table>