title: Clear data after update data in datatables for angular 8
body: <p>i'm using this plugin <a href="https://l-lin.github.io/angular-datatables/#/advanced/rerender" rel="nofollow noreferrer">https://l-lin.github.io/angular-datatables/#/advanced/rerender</a> for could use datatable in angular,  i have a form for search data, it'll be show in table, the problem is when i do many search,  the table update with the new data but also show data of searches before.</p>
  <p>Some idea to clear data before update with the new data.</p>
  <p>I'm using this code for my dattables.</p>
  <pre><code>@ViewChild(DataTableDirective, { static: false })
  dtElement: DataTableDirective;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject&lt;DataTableDirective&gt; = new Subject();
  
  
  ngAfterViewInit(): void {
      this.dtTrigger.next();
    }
  
    ngOnDestroy(): void {
      // Hay que dessuscribirse del evento dtTrigger, para poder recrear la tabla.
      this.dtTrigger.unsubscribe();
    }
  
    //----------------------------------------------------
    // ReDraw Datatable
    reDraw(): void {
      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) =&gt; {
        // Destruimos la tabla
        dtInstance.destroy();
        // dtTrigger la reconstruye
        this.dtTrigger.next();
      });
    }
  </code></pre>
  <p>Here, i call the function to update datatable with de new data.</p>
  <pre><code>this._investigadorGrupoService.find(this.InvestigadorGrupo).subscribe((result: any) =&gt; {          
        this.reDraw();
        this.ListInvestigadores = result;
        this.bSearchActive = true;          
        $('#processing').addClass(&quot;escondido&quot;);
      });
  </code></pre>
  <p>this is my HTML</p>
  <pre><code>&lt;table id=&quot;dtDataTable&quot; datatable [dtOptions]=&quot;dtOptions&quot; class=&quot;row-border hover&quot; [dtTrigger]=&quot;dtTrigger&quot; style=&quot;width:100%&quot;&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;Acciones&lt;/th&gt;
                &lt;th&gt;Nombre&lt;/th&gt;
                &lt;th&gt;Facultad&lt;/th&gt;
                &lt;th&gt;Nombre Grupo&lt;/th&gt;
                &lt;th&gt;Es Lider&lt;/th&gt;
                &lt;th&gt;Email&lt;/th&gt;              
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr *ngFor=&quot;let i of ListInvestigadores&quot;&gt;
                &lt;td&gt;
                  &lt;a class=&quot;btn btn-warning text-white&quot; (click)=&quot;onEdit(i.investigador)&quot;&gt;
                    &lt;span [innerHTML]=&quot;Tools.GetIconEdit() | safe: 'html'&quot;&gt;&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/td&gt;
                &lt;td&gt;{{i.investigador.nombres}} {{i.investigador.apellidos}}&lt;/td&gt;
                &lt;td&gt;{{i.grupo.facultad.nombre}}&lt;/td&gt;
                &lt;td&gt;{{i.grupo.nombre}}&lt;/td&gt;
                &lt;td&gt;{{i.esLiderGrupo ? 'Si': 'No'}}&lt;/td&gt;              
                &lt;td&gt;{{i.investigador.email}}&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  <p>Thanks for your support</p>