如何以角度重新加载数据表？

我希望当我按下filter_field字段上的任何键时它会重新加载表，我已经尝试过dtOptions.destroy;，dtOptions.renderer;但是这两个都没有重新加载表。

这是我正在使用的库：链接

category.component.html

<blockquote>Haz clic en alguna fila</blockquote>
<p class="text-danger">Hiciste clic en: <strong>{{ message }}</strong></p>
<div class="row">
    <section class="col-md-12">
        <div class="box box-primary">
            <div class="box-body" style="">
                <div class="form-group">
                    <label for="filter_campo" class="control-label col-md-4">Nombre</label>
                    <div class="col-md-8">
                        <input type="text" (keyup)="keyNombre($event.target.value)" class="form-control" id="filter_campo" name="filter_campo">
                    </div>
                </div>
                <div class="form-group">
                    <label for="filter_estados" class="control-label col-md-4">Estado: </label>
                    <div class="col-md-8">
                        <select id='filter_estados' name='filter_estados' class='form-control'>
                            <option value="" disabled="disabled" selected="true">Elija...</option>
                            <option value="true">Activos</option>
                            <option value="false">Inactivos</option>
                            <option value="">Todos</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

类别.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables';

import { CategoriaService } from '../services/categoria.service';
import { Categoria } from '../models/categoria';

@Component({
    selector: 'app-categoria',
    templateUrl: '../views/categoria.component.html',
    styleUrls: ['../styles/categoria.component.css'],
  providers: [CategoriaService]
})
export class CategoriaComponent implements OnInit {

  message = '';
  dtOptions: DataTables.Settings = {};

  public id;
  public categoria: Categoria[];

  constructor(
    private http: HttpClient
  ){
  }

  someClickHandler(info: any): void {
    this.message = info.id + ' - ' + info.nombre;
  }

  nombre = '';
  status = '';

  ngOnInit(): void {
    this.listado();
  }

  keyNombre(e){
    this.nombre = e;
    this.dtOptions.destroy;
    this.dtOptions.renderer;
  }

  listado(){
    this.dtOptions = {
      ajax: {
        url: 'http://localhost/webapp-backend/index.php/categorias/listar',
        type: 'POST',
        global: false,
        method: 'POST',
        data: {
          "json": [
            {
              nombre: this.nombre
            },
            {
              status: this.status
            }
          ]
        }
      },
      columns: [
        {
          data: 0, searchable: false, orderable: false, render: function( data, type, full, meta ){
            return meta.row;
          }
        },
        {
          searchable: false,
          "render": function ( data, type, row ) {
            return row.nombre;
          }
        },
        {
          searchable: false,
          "render": function ( data, type, row ) {
            if(row.status){
              return 'Activo';
            }else{
              return 'Inactivo';
            }
          }
        },
      ],
      order: [[1, 'asc']],
      rowCallback: (row: Node, data: any[] | Object, index: number) => {
        const self = this;
        $('td', row).unbind('click');
        $('td', row).bind('click', () => {
          self.someClickHandler(data);
        });
        return row;
      },
      initComplete: function (data) {
      },
      responsive: true
    };
  }
}

更新 1：

使用httpClient：

打字稿：

that.http
  .post(
    this.url+'categorias/listar',
    {
        "nombre": this.categorias.nombre,
        "status": this.categorias.status,
    }
  ).subscribe(resp => {

    callback({
      recordsTotal: resp.data.length,
      recordsFiltered: resp.data.length,
      data: resp.data
    });
  });

PHP：

$app->post("/categorias/listar", function() use($app, $db){
    $method = $app->request()->getBody();
    $data = json_decode($method, true);
    $sql  = '';
    $sql .= "SELECT * FROM categorias AS c ";
    if(($data['nombre'] != '')||($data['nombre'] != null)){
        $sql .= "WHERE nombre='".$data['nombre']."'";
    }
    $sql .= " ORDER BY nombre";

    try {

        $stmt = $db->query($sql);
        $tables = [];
        while ($row = $stmt->fetch(\PDO::FETCH_ASSOC)) {
            $tables[] = $row;
        }
        $result = array(
            'status' => 'success',
            'code' => 200,
            'data' => $tables,
        );
        echo json_encode($result);
    } catch (\PDOException $e) {
        echo json_encode($e->getMessage());
    }
});

我遇到的问题是分页：