Упорядочение и поиск 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>

Любые предложения, или если вам нужно больше кода, пожалуйста, дайте мне знать?