Issues with DtTrigger when rendering multiple tables

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

What versions you are using?

- node version: 6.11.4
- angular version: 5.1.2
- angular-cli version: 1.6.3
- jquery version: 3.2.1
- datatables version: 1.10.16
- angular-datatables version: 5.0.0

Current behavior

I am trying to use multiple tables in a single view and used this Issue for reference on setup https://github.com/l-lin/angular-datatables/issues/1088

I have a dtOptions and dtTrigger in an array, an instance for each table.

@ViewChildren(DataTableDirective)
dtElements: QueryList<DataTableDirective>;
dtOptions: DataTables.Settings[] = [];
dtTrigger: Subject<any>[] = [];

ngOnInit() {
    this.dtTrigger["new"] = new Subject<any>();
    this.dtOptions["new"] = { ... };
}

<table datatable [dtOptions]="dtOptions['new']" [dtTrigger]="dtTrigger['new']"></table>

The table does not render with options. If I remove dtTrigger from the table config then the table renders as expected with options. The issue is then I cannot rerender the table because I need to call

dtTrigger.next()

but dtTrigger does not exist if I don’t include it in the table definition. If I drop the array of dtTriggers and just use a single instance of dtTrigger for testing purposes

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

<table datatable [dtOptions]="dtOptions['new']" [dtTrigger]="dtTrigger"></table>

This also fails to render the table. So it appears there is something not working properly with using dtTrigger when using the recommended method of rendering multiple tables.

Expected behavior

Datatables should function normally, not crash when using DtTrigger

Minimal reproduction of the problem with instructions

This was a template provided from another post and i modified to show the issue. Removing the dtTrigger from the table definition allows for table rendering. Any attempt to use dtTrigger results in the table not rendering.

http://plnkr.co/edit/ntYDaywa9xZ81AQR2obP

[epiphanizer]

Hi @shanmukhateja! I ended up figuring out my issue. I will say this for anybody else who runs into this.

We were using ngOnChanges to watch for changes and update the table. ngOnChanges is pretty active in its change-detection and was responding to way more changes than we needed… I had to make sure we were setting appropriate conditionals to only listen for data changes rather than things like table height changes, etc…

The other thing I did was set a “isDtInitalized” parameter within the component class . Combined with an *ngIf on the component markup, that was also helpful.

Other things — making sure you are running the .next() call within setTimeout()… establishing a valid subscription and then clearing it, etc…

Before destroying, for some reason, i had to also run dtInstance.clear() before dtInstance.destroy() to actually remove the old data… otherwise, sorts on a changed table would sort the initial data.

All of these added up to it working just great!

[riyas145]

there is any solution for render two tables in a single view ? i want to render each tables sepereatly @shanmukhateja @l-lin @epiphanizer @shohag000 @mritunjaybs1510