angular - dtOptions createdRow、columnDefs 等未生效，因为可能稍后加载 ajax 数据

Question

我正在使用服务器端处理将数据加载到我的数据表中。应用程序位于带有 Asp.NET core 2.1 Web API 的 Angular 10 中。

完整的代码如下。

早些时候我使用 dtTrigger 并且 dtOptions 填充正确。但是由于数据量很大，我需要将其更改为使用 ajax 数据的服务器端处理。

'formatDueDateColumn()' 用于根据特定条件为线条着色。'defineColumnDefinitions()' 用于根据角色对列的可见性。现在移动到服务器端处理“宽度”后，“formatDueDateColumn()”和“defineColumnDefinitions()”没有生效。

任何帮助表示赞赏。谢谢！

this.dtOptions = {
  scrollX: true,
  scrollY: '60vh',
  pageLength: 50,
  deferRender: true,
  pagingType: 'full_numbers',
  serverSide: true,
  processing: true,
  ajax: (dataTablesParameters: any, callback) => {
    if(this.nav.isUserRoleAdmin){
      this.searchCriteria = { isPageLoad: true, filter: "" };
    }
    else{
      this.searchCriteria = { isPageLoad: true, filter: this.userFullName };
    }
    dataTablesParameters.searchCriteria = this.searchCriteria;
    this.http
      .post<DataTablesResponse>(
        `${this.service.rootURL}/SurveyRequests/GetSurveyRequests`,
        dataTablesParameters, {}
      ).subscribe(resp => {
        this.service.list = resp.data;
        this.service.refreshSurveyPayments();

        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: []
        });
      });        
  },
  columns: [
    { "width": "130px" },
    null,
    { "width": "120px" },
    { "width": "200px" },
    { "width": "80px" },
    { "width": "100px" },
    { "width": "120px" },
    { "width": "50px" },
    null,
    null,
    null,
    null,
    null,
    null,
    { "width": "120px" },          
    { "width": "120px" },
    null,
    null,
    { "width": "60px" },
    { "width": "100px" },
    { "width": "80px" },
    null,
    null,
    null,
    null,
    { "width": "120px" },
    { "width": "120px" }
  ],        
  createdRow: function ( row, data, index ){
    formatDueDateColumn(row, data, index, colCountForSubstraction);         
  },
  "columnDefs": this.defineColumnDefinitions(),
  dom: 'lBfrtip',
  buttons: [
    {
      extend:'excel',
      text: 'Export to Excel',
      exportOptions: {
      columns: ':not(.notexport)'
    }
    }
  ]
};

标签： angulardatatablesangular-datatables