One dtInstance if multiple tables are in same view, the angular way

Before you write your question, please take some extra time to write a good title that is short yet descriptive.

What versions you are using?

• node version: v8.4.0
• npm version: v5.3.0
• angular version: 4
• jquery version: 3.2.1
• datatables version: 1.10.16
• angular-datatables version: 4.2.0
• angular-cli version: 1.3.2

What’s the problem?

I’ve tried to include several data tables in the same view as a requirement for my project, also i need to add dynamically a row to each table by a modal. To do that i need to get the table instance, as I saw here #1074, nevertheless I always get the instance for the first table only, I think same as #1065

To get the table instance I followed https://l-lin.github.io/angular-datatables/#/advanced/dt-instance.

To make the tables I followed https://l-lin.github.io/angular-datatables/#/basic/angular-way

Maybe im not doing this the right way, but my requirement is to have several tables in the same view (also I have them all in the same component, as you will see in my code). Then on the click of a button open a modal that will give me some data for me to add a new row to a specific table. I tried to keep it simple, so the table have the same thing as the example in your docs, meaning persons, but I made them static to not make use of the http call yet.

Can you share your code?

Tried as the doc:

  @ViewChild(DataTableDirective)
  datatableElement: DataTableDirective;
  @ViewChild(DataTableDirective)
  datatableElement2: DataTableDirective;

Also tried as the answer i already put before:

  @ViewChild('Table1')
  datatableElement: DataTableDirective;
  @ViewChild('Table2')
  datatableElement2: DataTableDirective;

Options for each table

  dtOptions: DataTables.Settings = {};
  dtOptions2: DataTables.Settings = {};

Triggers

  dtTrigger: Subject<any> = new Subject();
  dtTrigger2: Subject<any> = new Subject();

Init function

  ngOnInit(): void {

    this.dtOptions = {
      pagingType: 'full_numbers'
    };

    this.dtOptions2 = {
      pagingType: 'full_numbers'
    };

    this.persons.push({
      id:20,
      firstName:'wasa',
      lastName:'lasa'
    })

    this.persons.push({
      id:21,
      firstName:'fasd',
      lastName:'masd'
    })
 }

After init

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

  }

Functions I tried for the buttons to add a row to each table

  addTable1(){
    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
      console.log(dtInstance);
      //Function to add row
    });
  }

  addTable2(){
    console.log(this.datatableElement2);
    this.datatableElement2.dtInstance.then((dtInstance: DataTables.Api) => {
      console.log(dtInstance);
      // function to add row
    });
  }

[l-lin]

You need to use @ViewChildren instead of @ViewChild:

import { AfterViewInit, Component, OnInit, ViewChildren, QueryList } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs/Rx';

@Component({
  selector: 'app-rerender',
  templateUrl: 'rerender.component.html'
})
export class RerenderComponent implements OnInit, AfterViewInit {
  @ViewChildren(DataTableDirective)
  dtElements: QueryList<DataTableDirective>;

  // ...

  rerender(): void {
    this.dtElements.forEach((dtElement: DataTableDirective) => {
      dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        // Do your stuff
      });
    });
  }
}

[dashawk]

Adding IDs to each table sometimes helps.