为什么我的数据表分页和搜索没有响应？

I am using datatable to show my data from db.But when my Api is called the data shows up in data table but the pagination and searching of data table wont work, when i call my API there appears that no data is showing in datatable where as the data shows in datatable

here is my datatable code

 <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover" >
    <thead>
      <tr>
        <th>ID</th>
        <th>Request_Cutable_Width</th>
        <th>Actual_Cutable_Width</th>
        <th>Color</th>
        <th>Contract No</th>
        <th>Construction</th>
        <th>Finish</th>
        <th>Meter_Yard_Length</th>
        <th>Total L-Point</th>
        <th>Penalty Point</th>
        <th>Trolly No</th>
        <th>Description</th>
        <th>Shift</th>
        <th>Quality</th>
        <th>Employee ID</th>
        <th>Meded</th>
        <th>Time Date</th>
        <th>Machine ID</th>

      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of customers; let i = index">
          <td>{{item.id}}</td>
          <td>{{item.req_cuttable_width}}</td>
          <td>{{item.act_cuttable_width}}</td>
          <td>{{item.color}}</td>
          <td>{{item.contract_no}}</td>
          <td>{{item.construction}}</td>
          <td>{{item.finish}}</td>
          <td>{{item.meter_yard_length}}</td>
          <td>{{item.total_l_point}}</td>
          <td>{{item.penalty_point}}</td>
          <td>{{item.trolly_no}}</td>
          <td>{{item.description}}</td>
          <td>{{item.shift}}</td>
          <td>{{item.quality}}</td>
          <td>{{item.employee_id}}</td>
          <td>{{item.mended}}</td>
          <td>{{item.timedate}}</td>
          <td>{{item.machine_id}}</td>
      </tr>

    </tbody>
  </table>

Here is my Api call

fetchRollHeader(){ var apiurl = 'http://localhost/abc/Controller/abc.php';

var data = new FormData();
data.append('data', 'fetchRollHeader');
data.append('roll_id', this.roll_id_start);

  return this.http.post<any>(apiurl, data)

      //.pipe(map(response => response))
      .subscribe(
            data=> {
          // if(data['response_type'] != undefined && data['response_type'] == 'Error'){

          //       if(data['response'] == 29){
          //       }else if(data['response'] == 8 || data['response'] == 9 || data['response'] == 10){
          //         this.router.navigate(['login']);
          //       }else{
          //         alert(data['response_value']);


          //       }
          //   }else{
              this.customers = data;


              //var abc;


            //}
             console.log(data);
             const table: any = $('table');

            },
            // error => {
            //     console.log("Error", error);
            //}
        ); 

}