Search code examples
datatablesangular5

Getting error in Angular 5 Datatables: cannot reinitialise DataTable

I am working on the angular based project. I am using datatables to display data. When I try to do some modifications on the table, I get the following error.

DataTables warning: table id=DataTables_Table_0 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Solution

  • I think it is because you are using [dtTrigger]="dtTrigger" in Angular DataTables and rerendering the table on the same page. If you have this problem you should use the following trick to handle dtTrigger

    <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table">

    Make sure you do not use this.dtTrigger.next() on ngOnInit() 

    ngAfterViewInit(): void {
    this.dtTrigger.next();
}

    Rerender it when you use the second time

    rerender(): void {
  this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
     dtInstance.destroy();
     this.dtTrigger.next();     
  });
}