title: Angular 6 DataTables - Table Items Appear/Disappear Upon Sort or Search
body: <p>I am using Angular-DataTables 6.0 (found here <a href="https://l-lin.github.io/angular-datatables/#/welcome" rel="nofollow noreferrer">https://l-lin.github.io/angular-datatables/#/welcome</a>) and I have been running into a reoccurring problem. When a table item is added or deleted, the record either vanishes or reappears upon sorting or searching. Is this possibly because the adding/deleting is occurring from outside the dataTable? </p>
  
  <p>I've tried adding the ' datatable="ng" ' fix many others suggested but that didn't change anything. I also attempted to add a re-render function, but in that case I ran into 'object unsubscribed' errors that I couldn't resolve. For reference, some similar problems can be found here: Similar examples include: (<a href="https://stackoverflow.com/questions/38921174/angular-lost-data-after-sort-datatable">angular : lost data after sort datatable</a>)
  (<a href="https://stackoverflow.com/questions/29475966/sorting-of-numbers-within-brackets-in-angular-datatables">Sorting of numbers within brackets in angular datatables</a>)
  (<a href="https://github.com/l-lin/angular-datatables/issues/852" rel="nofollow noreferrer">https://github.com/l-lin/angular-datatables/issues/852</a>)</p>
  
  <p>Here is my code:</p>
  
  <pre><code>HTML:
    &lt;table datatable="ng" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover" id="t1"&gt;
                  &lt;thead&gt;
                          &lt;tr&gt;
                                  &lt;th&gt;
                                      &lt;button id="b5"&gt;Asset ID&lt;/button&gt;
                                  &lt;/th&gt;
                                  &lt;th&gt;
                                      &lt;button id="b5"&gt;Employee ID&lt;/button&gt;
                                  &lt;/th&gt;
                                  &lt;th&gt;
                                      &lt;button id="b5"&gt;Asset Type&lt;/button&gt;
                                  &lt;/th&gt;
                                  &lt;th&gt;View&lt;/th&gt;
                                  &lt;th&gt;Delete&lt;/th&gt;
                                &lt;/tr&gt;
                                &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr *ngFor="let a of assets; let i = index"&gt; 
            &lt;td&gt;{{ a.assetID }}&lt;/td&gt;
            &lt;td&gt;{{ a.currentUser }}&lt;/td&gt;
            &lt;td&gt;{{ a.assetType }}&lt;/td&gt;
            &lt;td&gt;&lt;button id="button1" (click)="viewAsset(a)"&gt;&lt;i class="fas fa-search"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;
            &lt;td&gt;&lt;button id="b2" class="btn" (click)="scrapAsset(a)" (mouseenter)="buttonHover(i)" (mouseleave)="buttonHoverLeave(i)"&gt;&lt;i class="{{buttonIconArray[i].text}}"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;/table&gt;
  -elsewhere in the code-
           &lt;button class="btn" id="b1" (click)="addAsset()"&gt;Add New Asset&lt;/button&gt;&amp;nbsp;
  </code></pre>
  
  <p>TS</p>
  
  <pre><code>   dtOptions: DataTables.Settings = {};
     dtTrigger = new Subject();
  
   addAsset()
   {
  this.confirmChanges = false;
  //Create a new asset:
  let a: Asset = {
    assetID: this.assetID,
    currentUser: this.currentUser,
    assetType: this.dropdownMessage,
  
  }
  //send a notification to the user that owns the new asset
    let notify: Notice = {
    emplyID: a.currentUser,
    notificationSource: "Asset",
    details: "A new " + this.dropdownMessage + " was added to your assets.",
    timeStamp: new Date()
  }
  
  //Add the asset to the server
  this.AssetsService.addAsset(a)
        .subscribe(asset =&gt; { this.assets.unshift(asset);
                              //All of the inputs need to be emptied
                              this.clearFields(); 
                            })
  }
  
  scrapAsset(a: Asset)
  {
  console.log("The ID is " , a.assetID)
  //this.AssetsService.deleteAsset(this.currentAsset).subscribe()
  this.confirmChanges = false;
  
  
  
  //This deletes the asset from the back-end.
  this.AssetsService.deleteAsset(a).subscribe(() =&gt; { 
    console.log('test')
    this.assets = this.assets.filter(t =&gt; t !== a);
    this.NotificationsService.addNotice(notify).subscribe();
    this.clearFields(); });
    }
  
  dtActivate()
   {
  this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 7,
  order: (this.assets.assetType),
  orderClasses: false,
  };
  this.AssetsService.getAssetsIT().subscribe((assetsImported) =&gt; {
  this.assets = assetsImported;
  this.parseData();
    // Calling the DT trigger to manually render the table
    this.dtTrigger.next();
  });
  }
  </code></pre>
  
  <p>This is only a partial section of the code, so if you need to see more, just ask. Thank you for any help you might provide!</p>