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

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

jahnelgroupjahnelgroup Posts: 6Questions: 1Answers: 0
edited October 2018 in Free community support

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

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • mystmicksmystmicks Posts: 1Questions: 0Answers: 0

    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.

  • WillJanWillJan Posts: 1Questions: 0Answers: 0

    You have same example.

This discussion has been closed.