Angular 6 - Table draw() is not redrawing table correctly with updated data

jahnelgroup

So we build our tables into Angular 6 and they each get created in ngOnInit(). There is also an editing feature on some fields that will send a PUT request to our server. This works and updates the current value of the element in the table and the value of the object in the server.

Whenever I call my PUT request I also have
this.table.draw();
on successful request. This command runs, but when I try to sort my new data via the column arrows it is still sorting as if there was no change. When I refresh the page I can now sort correctly. But I don't want our users to have to refresh to sort or search their data correctly.

Here's my code:

ngOnInit() {
    const subscription = this.dataService.getClientData().subscribe(val => {
        this.clients = val;
        console.log(this.clients);

        this.chRef.detectChanges();

        this.table = $('table').DataTable({
          'destroy': true,
          'paging': true,
          'info': true,
          'autoWidth': true,
          'responsive': true,
          scrollY: '600',
          // scrollCollapse: true, // fixedHeader will be disabled, but will fix some scrolling issues
          scrollX: true,
        });
        this.showSpinner = false;
    });
  }

//Called on table element EDIT
updateContract(value, client) {
    // PUT req
    if (client.contractType === value) {
      return;
    }
    client.contractType = value;

    this.options = {
      host: this.buildUrl(client)
    };
    this.sendPutRequest(this.options.host, client, this.options);
  }

sendPutRequest(updateUrl, client, options) {
    this.http.put(updateUrl, client, options).subscribe(
      val => {
        console.log('PUT call successful value returned in body', val);
      },
      response => {
        console.log('PUT call in error', response);
      },
      () => {
        console.log('The PUT observable is now completed.');
        this.table.draw();      // Command is RUNNING but table is not UPDATING
        console.log('Table redrawn');
      }
    );
  }

allan

Can you link to a test case showing the issue please.

Allan

mystmicks

Angular DOM updates are not caught by Jquery and vice versa.

You have to destroy the table and reinitialize it for it to show the updated data.

table.DataTable().destroy(); add this when you update the data and create the datatable again.

WillJan

You have same example.