Почему мои датируемые нумерация страниц и поиск не отвечают?

Я использую datatable для отображения моих данных из db. Но когда мой Api вызывается, данные отображаются в таблице данных, но разбиение на страницы и поиск в таблице данных не будут работать,
когда я вызываю мой API, появляется сообщение, что в datatable данные не отображаются, а данные — в datatable

вот мой код данных

 <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>

Вот мой вызов API

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);
//}
);

}