Angular DataTables在服务器端加载时进行排序和搜索

Question

我正在将Angular 7与DataTables一起使用。我想在页面上进行搜索和排序，但是当我通过服务器端分页加载数据时，页面上的排序和搜索不起作用。

虽然我知道我可以使用我的API和搜索进行排序，但我不希望他的行为。此外，使用这种方法，我无法隐藏dataTables_empty分类

组件：

import { Component, OnInit } from "@angular/core";
import { Subject } from "rxjs";
import { ConsumerService } from "../../services/consumer.service";
import { HttpClient, HttpResponse } from '@angular/common/http';
import { ConfigService } from '../../services/ConfigService';


class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}

@Component({
  selector: "app--new",
  templateUrl: "./new.component.html",
  styleUrls: ["./new.component.css"]
})
export class NewComponent implements OnInit {

  dtOptions: DataTables.Settings = {};
  new: New[];

  constructor(private http: HttpClient, private appConfigService: ConfigService) {}

  ngOnInit(): void {
    const that = this;

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 100,
      ordering: true,
      lengthMenu: [25, 50, 100, 250, 500],
      searching: true,
      serverSide: true,
      processing: true,
      ajax: (dataTablesParameters: any, callback) => {
        that.http
          .post<DataTablesResponse>(
            this.appConfigService.apiBaseUrl + 'webapi/Report/New',
            dataTablesParameters,
            {}
          ).subscribe(resp => {
            that.new = resp.data;
            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: []
            });
          });
      },
      columns: [
        { data: 'x' }, { data: 'y' }, { data: 'z' }, { data: 'a' }
      ]
    };
  }

}

HTML：

<section class="content-header">
  <h1>
    {{title}}
  </h1>

</section>

<style>
  .dataTables_empty {
  display: none !important;
}

  #scrolling {
  overflow: hidden;
  display: block;
  position: relative;
  border: 1px solid blue;
}

</style>

<section class="content" style="overflow-x: scroll">
  <div class="row">
    <div class="col-xs-12">

      <table datatable [dtOptions]="dtOptions" class="table table-bordered table-striped scroll" style="max-height: 100%">
        <thead>
          <tr>
            <th>z</th>
            <th>y</th>
            <th>x</th>
            <th>a</th>
          </tr>
        </thead>
        <tbody *ngIf="new?.length != 0">
          <tr *ngFor="let n of new">
            <td>{{ n.z}}</td>
            <td>{{ n.y}}</td>
            <td>{{ n.x}}</td>
            <td>{{ n.a}}</td>

          </tr>
        </tbody>
        <tbody *ngIf="new?.length == 0">
          <tr>
            <td colspan="3" class="no-data-available">No data!</td>
          </tr>
        <tbody>
      </table>

    </div>
  </div>
</section>

有什么建议，或者如果您需要更多代码，请告诉我？