all data is lost when i click on a event

DiogoMMC

0

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 i have on the webpage

https://i.stack.imgur.com/q2y3F.png

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

kthorngren

I'm guessing you are initializing Datatables before the service populates the table. If this is the case then Datatables won't know about the added table rows. I'm not familiar with angular to tell you how to do this but you will need to make sure Datatables is initialized after the service has completed populating the table. Maybe there is a callback or event when this is complete?

See this FAQ for more details.

Kevin

DiogoMMC

This is my code when that calls the service

import { Component, OnInit } from '@angular/core';
import {RoutesService} from "../Service/Route/routes.service";


@Component({
  selector: 'app-list-routes',
  templateUrl: './list-routes.component.html',
  styleUrls: ['./list-routes.component.css']
})
export class ListRoutesComponent implements OnInit {

  constructor(private service : RoutesService) { }

  dtoptions:DataTables.Settings={};

  ngOnInit(): void {

    this.service.listRoutes();

    this.dtoptions={
      pagingType:'full_numbers'
    };

  }

}

i will try to change some things acording to what you said

allan

It looks to me that you are trying to have both Angular and DataTables control the same DOM elements. That isn't going to work - they will conflict against each other. If Angular is only going to write the elements once, then do as Kevin says and initialise the DataTable once the table rows have been drawn.

However, if it can then update them in future, use the data option or rows.add() method to populate data into the DataTable.

Basically if Angular makes a change to the DOM, DataTables isn't going to see it.

Allan