DataTable——当我点击一个事件时，所有数据都丢失了

Question

I am trying out DataTables for the first time in a angular project, i managed to get the table template working with my data (that i get from a service) but everytime i press a button all the data disapears( no error is shown on logs) and the number of rows that should be apearing per page is not working aswell and i the first line row that i get in my table is "No data available in table" only when i refresh the page the data comes back again. Basicly not one feature is working.

The Html table is the following

<div class="center">
  <h1><i class='bx bxs-package'></i> Routes List</h1>
  <table id="tbody" datatable [dtOptions]="dtoptions"  class="row-border hover">
    <thead>
    <tr>
      <th>Starting Warehouse ID</th>
      <th>Destination Warehouse ID</th>
      <th>Distance</th>
      <th>Time</th>
      <th>Energy</th>
    </tr>
    </thead>
  </table>
</div>

the service i'm using

public extractData(res: any) {
  return res || {};
}

getRoutes(): Observable<any> {
  return this.http.get('http://localhost:3000/api/routes').pipe(map(this.extractData));
}

listRoutes(): void {
  let tbody = document.getElementById('tbody') as HTMLTableElement;
  let array = this.getRoutes();

  array.forEach(function (i) {
    for (let j = 0; j < i.length; j++) {
      let tr = tbody.insertRow();

      let td_idWarehouseStart = tr.insertCell();
      let td_idWarehouseDestination = tr.insertCell();
      let td_distance = tr.insertCell();
      let td_time = tr.insertCell();
      let td_energy = tr.insertCell();

      td_idWarehouseStart.innerText = i[j].idWarehouseStart;
      td_idWarehouseDestination.innerText = i[j].idWarehouseDestination;
      td_distance.innerText = i[j].distance;
      td_time.innerText = i[j].time;
      td_energy.innerText = i[j].energy;

    }
  });
}

and this is the output in the web page

enter image description here

I have no idea how to fix this. I know it has something to do with my service, because if i dont use the service and push data hard coded into the html it works just fine

Answer 1

As recomended by a reply I used the DataTables API and it now works just fine, i changed the service code to the following

var dataTable = $('#tbody').DataTable();
    var routesArray = this.getRoutes();

    routesArray.forEach(function (i){
      for(let j=0;j<i.length;j++){
        dataTable.row.add(
          [
            i[j].idWarehouseStart,
            i[j].idWarehouseDestination,
            i[j].distance,
            i[j].time,
            i[j].energy
          ]
        ).draw();
      }
    })