Refreshing datatables.net table data in Angular 7 keeps a copy of the old data from table's first loading

Related searches

I'm trying to make a live reporting from a REST API request using the datatables.net library in Angular 7. If I make a data update into the database, the data in the table is updated. However, If I touch the table (i.e. reorder, search for something, change the page, etc), on data reloading (which occurs every 5 seconds), in the table is added the data from the first load of the table. If I touch the table again, the updated data disappears, and only the old data remains, until the next data update, when the new data is added again in the table.

This is the state of the table when the page loads

This is the state of the table when the data in the database is updated

This is the behavior of the table when any change is made on the table (i.e. sort, search, switch page, etc)

This is the code for the component:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { DownloadService } from '../services/download/download.service';
import { stringify } from 'querystring';
import { Router } from '@angular/router';

@Component({
  selector: 'app-downloads',
  templateUrl: './downloads.component.html',
  styleUrls: ['./downloads.component.css']
})

export class DownloadsComponent implements OnInit {

  downloadData$: any[] = [];
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();
  interval: any;

  constructor(private http: HttpClient, private data: DownloadService, private router: Router) { }

  ngOnInit() {
    this.dtOptions = {
      responsive: true
    };

    this.data.GetDownloads().subscribe(data => {
      this.downloadData$ = data;
      this.dtTrigger.next();
    });

    this.interval = setInterval(() => {
      this.refreshData();
    }, 5000);
  }

  refreshData() {
    this.data.GetDownloads().subscribe(data => {
      this.downloadData$ = data;
    });
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}

and this is the html file

<div>
  <table style="text-align: center;" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"
    datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
    <thead>
      <tr>
        <th>Logger Name</th>
        <th>Progress</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let download of downloadData$">
        <td>{{ download.logger.name }}</td>
        <td [attr.data-order]="download.progress"><progress [attr.value]="download.progress" max="100"></progress>
          {{ download.progress }}%</td>
      </tr>
    </tbody>
  </table>
</div>

You have to destroy the table first and re render. You can refer the article here. A code snippet if link gets disabled in future.

rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
  // Destroy the table first
  dtInstance.destroy();
  // Call the dtTrigger to rerender again
  this.dtTrigger.next();
});
}

Another solution is as discussed here

Let me know if this solution works or if you have any query.

Refreshing datatables.net table data in Angular 7 keeps a , Refreshing datatables.net table data in Angular 7 keeps a copy of the old data from table's first loading #1362. Open. adriansd27 opened this� After reload the data outside the table,it alert the error'cannot reinitialise datatable' the versions I am using jquery version:2.1.3 datatables version: 1.10.7 angular-datatables version:0.5.5 My problem I build the datatables using th


I tried it out and this behavior is very weird, it defaults back to the original values. This is not a problem with your code but instead with angular-datatable library.

For the meantime downgrade to angular-datatables@6.0.0 using

npm install --save angular-datatables@6.0.0 or yarn add angular-datatables@6.0.0

I tried it out and it works fine.

clear(), This method simply removes all rows from the DataTables, resulting in a data that this method will not automatically redraw the table with an empty data set. the data should be deleted from the data store (i.e. an Ajax request to the server) � Angular 7 increased his performance speed. I am showing the data in Datatables with custom json data and also for giving good look to datatable, I have used bootstrap in it, here is the working picture: I will hope that, this will help you in rendering json data in datatables. Here are the working steps, you need to follow: 1. Very first, you


I had the same problem. Calling the dtTrigger after a callback from my data update method solved it:

rerender(): void {
  this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => { 

    // Destroy the table first
    dtInstance.destroy();

    //reload your data
    this.reloadDataMethod(()=>{

       // Call the dtTrigger to rerender **after callback**
       this.dtTrigger.next();

    })
  });
 }

State saving, DataTables has the option of being able to save the state of a table (its paging uses the HTML5 localStorage and sessionStorage APIs for efficient storage of the data. saving option will not work with IE6/7 as these browsers do not support these APIs. Previous123456Next https://cdn.datatables.net/1.10.21/js/jquery. If I make a data update into the database, the data in the table is updated. However, If I touch the table (i.e. reorder, search for something, change the page, etc), on data reloading (which occurs every 5 seconds), in the table is added the data from the first load of the table. If I touch the table again, the updated data disappears, and


How to Use a JavaScript DataTable in an Angular Application, If I touch the table again, the updated data disappears, and only the old data remains, until the next data update, when the new data is added again in the table. jQuery datatable is very popular and featured jQuery grid plugin.This angular tutorial help to integrate jQuery datatable with angular 4.Angular 4 is updated version of angular 2.I will use angular CLI to create Sample angular 4 application file structure and HTTP module to get data from rest api call.I have already shared tutorial for jQuery […]


So why don't we use one of the seasoned JavaScript data tables? (Update April 4 , 2018: Keep in mind that the original version of this article has been written in It looks promising, but at the time of writing, it was only 26 days old. npm install bootstrap --save npm install datatables.net --save npm install� jQuery DataTables is a popular jQuery library to display data in grid table. The DataTables convert simple HTML table into feature rich HTML Table with advance options like searching, sorting and pagination. So if you’re thinking about integrating jQuery DataTables in your Angular 8 project then you’re here at right place.


Short Angular data table market survey (as of Jan 21, 2017 / updated Apr 4, 2018) I've already mentioned Louis Lin's project. He does exactly what we're doing later in this article: integrating the table from DataTables.net. The demos look nice, and I guess you can pass almost every option of the JavaScript widget to the angular-datatables.