Angular 6 Datatable refresh data in table after outside filtering
0
i'm trying to render the rows in the table after request.
i can see the the response in the browser and i am pushing the new data to the
ROWS: object,
but the table is not refreshing the rows in table.
sample code:
import {Component, OnDestroy, OnInit} from '@angular/core';
import { Subject } from 'rxjs';
import { XXXXXXXService } from './NAME.service';
@Component({
selector: 'app-NAME',
templateUrl: './NAME.component.html',
styleUrls: ['./NAME.component.scss']
})
export class XXXXXXXComponent implements OnDestroy, OnInit {
dtOptions: DataTables.Settings = {};
rows = ;
dtTrigger: Subject<any> = new Subject();
constructor(private XXXXXXXService: XXXXXXXService) { }
ngOnInit(): void {
this.rows.length = 0;
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 25
};
this.class.getRows()
.subscribe(rows => {
console.log(rows);
this.rows = rows;
// Calling the DT trigger to manually render the table -- not working!!!
this.dtTrigger.next();
});
}
render_rows_filters(filter) {
this.class.getRowsFiltered(filter).subscribe(
rows => {
this.rows = rows;
this.dtTrigger.next();
}
);
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
}
html
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table-bordered">
<!--class="row-border table-bordered hover">-->
<thead>
<tr>
<th> NAME</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td>{{ row.Name }}</td>
</tr>
</tbody>
</table>
html angular datatable angular6 render
edited Nov 14 '18 at 17:15
Daniel W Strimpel
3,5361718
asked Nov 14 '18 at 16:42
joy sjoy s
1
add a comment |
0
i'm trying to render the rows in the table after request.
i can see the the response in the browser and i am pushing the new data to the
ROWS: object,
but the table is not refreshing the rows in table.
sample code:
import {Component, OnDestroy, OnInit} from '@angular/core';
import { Subject } from 'rxjs';
import { XXXXXXXService } from './NAME.service';
@Component({
selector: 'app-NAME',
templateUrl: './NAME.component.html',
styleUrls: ['./NAME.component.scss']
})
export class XXXXXXXComponent implements OnDestroy, OnInit {
dtOptions: DataTables.Settings = {};
rows = ;
dtTrigger: Subject<any> = new Subject();
constructor(private XXXXXXXService: XXXXXXXService) { }
ngOnInit(): void {
this.rows.length = 0;
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 25
};
this.class.getRows()
.subscribe(rows => {
console.log(rows);
this.rows = rows;
// Calling the DT trigger to manually render the table -- not working!!!
this.dtTrigger.next();
});
}
render_rows_filters(filter) {
this.class.getRowsFiltered(filter).subscribe(
rows => {
this.rows = rows;
this.dtTrigger.next();
}
);
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
}
html
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table-bordered">
<!--class="row-border table-bordered hover">-->
<thead>
<tr>
<th> NAME</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td>{{ row.Name }}</td>
</tr>
</tbody>
</table>
html angular datatable angular6 render
edited Nov 14 '18 at 17:15
Daniel W Strimpel
3,5361718
asked Nov 14 '18 at 16:42
joy sjoy s
1
1
What is the npm package that you are using for yourdatatablefeature?
– Daniel W Strimpel
Nov 14 '18 at 17:21
can you not render this table or can you not filter the table after the table is shown?
– Yong
Nov 14 '18 at 18:07
@Yong i can filter the table.
– joy s
Nov 17 '18 at 19:28
@DanielWStrimpel i'm using "angular-datatables": "^6.0.1"
– joy s
Nov 17 '18 at 19:36
That library is showing on its documentation that you need to first destroy the table and then trigger the next render. Have you tried that? l-lin.github.io/angular-datatables/#/advanced/rerender
– Daniel W Strimpel
Nov 19 '18 at 17:28
add a comment |
0
0
0
i'm trying to render the rows in the table after request.
i can see the the response in the browser and i am pushing the new data to the
ROWS: object,
but the table is not refreshing the rows in table.
sample code:
import {Component, OnDestroy, OnInit} from '@angular/core';
import { Subject } from 'rxjs';
import { XXXXXXXService } from './NAME.service';
@Component({
selector: 'app-NAME',
templateUrl: './NAME.component.html',
styleUrls: ['./NAME.component.scss']
})
export class XXXXXXXComponent implements OnDestroy, OnInit {
dtOptions: DataTables.Settings = {};
rows = ;
dtTrigger: Subject<any> = new Subject();
constructor(private XXXXXXXService: XXXXXXXService) { }
ngOnInit(): void {
this.rows.length = 0;
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 25
};
this.class.getRows()
.subscribe(rows => {
console.log(rows);
this.rows = rows;
// Calling the DT trigger to manually render the table -- not working!!!
this.dtTrigger.next();
});
}
render_rows_filters(filter) {
this.class.getRowsFiltered(filter).subscribe(
rows => {
this.rows = rows;
this.dtTrigger.next();
}
);
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
}
html
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table-bordered">
<!--class="row-border table-bordered hover">-->
<thead>
<tr>
<th> NAME</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td>{{ row.Name }}</td>
</tr>
</tbody>
</table>
html angular datatable angular6 render
edited Nov 14 '18 at 17:15
Daniel W Strimpel
3,5361718
asked Nov 14 '18 at 16:42
joy sjoy s
1
i'm trying to render the rows in the table after request.
i can see the the response in the browser and i am pushing the new data to the
ROWS: object,
but the table is not refreshing the rows in table.
sample code:
import {Component, OnDestroy, OnInit} from '@angular/core';
import { Subject } from 'rxjs';
import { XXXXXXXService } from './NAME.service';
@Component({
selector: 'app-NAME',
templateUrl: './NAME.component.html',
styleUrls: ['./NAME.component.scss']
})
export class XXXXXXXComponent implements OnDestroy, OnInit {
dtOptions: DataTables.Settings = {};
rows = ;
dtTrigger: Subject<any> = new Subject();
constructor(private XXXXXXXService: XXXXXXXService) { }
ngOnInit(): void {
this.rows.length = 0;
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 25
};
this.class.getRows()
.subscribe(rows => {
console.log(rows);
this.rows = rows;
// Calling the DT trigger to manually render the table -- not working!!!
this.dtTrigger.next();
});
}
render_rows_filters(filter) {
this.class.getRowsFiltered(filter).subscribe(
rows => {
this.rows = rows;
this.dtTrigger.next();
}
);
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
}
html
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table-bordered">
<!--class="row-border table-bordered hover">-->
<thead>
<tr>
<th> NAME</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td>{{ row.Name }}</td>
</tr>
</tbody>
</table>
html angular datatable angular6 render
html angular datatable angular6 render
edited Nov 14 '18 at 17:15
Daniel W Strimpel
3,5361718
asked Nov 14 '18 at 16:42
joy sjoy s
1
edited Nov 14 '18 at 17:15
Daniel W Strimpel
3,5361718
asked Nov 14 '18 at 16:42
joy sjoy s
1
edited Nov 14 '18 at 17:15
Daniel W Strimpel
3,5361718
edited Nov 14 '18 at 17:15
Daniel W Strimpel
3,5361718
edited Nov 14 '18 at 17:15
Daniel W Strimpel
3,5361718
3,5361718
asked Nov 14 '18 at 16:42
joy sjoy s
1
asked Nov 14 '18 at 16:42
joy sjoy s
1
asked Nov 14 '18 at 16:42
joy sjoy s
1
1
1
What is the npm package that you are using for yourdatatablefeature?
– Daniel W Strimpel
Nov 14 '18 at 17:21
can you not render this table or can you not filter the table after the table is shown?
– Yong
Nov 14 '18 at 18:07
@Yong i can filter the table.
– joy s
Nov 17 '18 at 19:28
@DanielWStrimpel i'm using "angular-datatables": "^6.0.1"
– joy s
Nov 17 '18 at 19:36
That library is showing on its documentation that you need to first destroy the table and then trigger the next render. Have you tried that? l-lin.github.io/angular-datatables/#/advanced/rerender
– Daniel W Strimpel
Nov 19 '18 at 17:28
add a comment |
1
What is the npm package that you are using for yourdatatablefeature?
– Daniel W Strimpel
Nov 14 '18 at 17:21
can you not render this table or can you not filter the table after the table is shown?
– Yong
Nov 14 '18 at 18:07
@Yong i can filter the table.
– joy s
Nov 17 '18 at 19:28
@DanielWStrimpel i'm using "angular-datatables": "^6.0.1"
– joy s
Nov 17 '18 at 19:36
That library is showing on its documentation that you need to first destroy the table and then trigger the next render. Have you tried that? l-lin.github.io/angular-datatables/#/advanced/rerender
– Daniel W Strimpel
Nov 19 '18 at 17:28
1
1
What is the npm package that you are using for your
datatable feature?– Daniel W Strimpel
Nov 14 '18 at 17:21
What is the npm package that you are using for your
datatable feature?– Daniel W Strimpel
Nov 14 '18 at 17:21
can you not render this table or can you not filter the table after the table is shown?
– Yong
Nov 14 '18 at 18:07
can you not render this table or can you not filter the table after the table is shown?
– Yong
Nov 14 '18 at 18:07
@Yong i can filter the table.
– joy s
Nov 17 '18 at 19:28
@Yong i can filter the table.
– joy s
Nov 17 '18 at 19:28
@DanielWStrimpel i'm using "angular-datatables": "^6.0.1"
– joy s
Nov 17 '18 at 19:36
@DanielWStrimpel i'm using "angular-datatables": "^6.0.1"
– joy s
Nov 17 '18 at 19:36
That library is showing on its documentation that you need to first destroy the table and then trigger the next render. Have you tried that? l-lin.github.io/angular-datatables/#/advanced/rerender
– Daniel W Strimpel
Nov 19 '18 at 17:28
That library is showing on its documentation that you need to first destroy the table and then trigger the next render. Have you tried that? l-lin.github.io/angular-datatables/#/advanced/rerender
– Daniel W Strimpel
Nov 19 '18 at 17:28
add a comment |
1 Answer
1
active
oldest
votes
0
Ok,
the thing is that when you use angular with components and services, one component can't declare the DataTable Element to another component running in the same page.
the solution was to create a outside (Global) service and pass all the component variables.
then running all the functions in the Service with the component variables and child's.
Thank you all... =)
answered Nov 25 '18 at 16:42
joy sjoy s
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304985%2fangular-6-datatable-refresh-data-in-table-after-outside-filtering%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Ok,
the thing is that when you use angular with components and services, one component can't declare the DataTable Element to another component running in the same page.
the solution was to create a outside (Global) service and pass all the component variables.
then running all the functions in the Service with the component variables and child's.
Thank you all... =)
answered Nov 25 '18 at 16:42
joy sjoy s
1
add a comment |
0
Ok,
the thing is that when you use angular with components and services, one component can't declare the DataTable Element to another component running in the same page.
the solution was to create a outside (Global) service and pass all the component variables.
then running all the functions in the Service with the component variables and child's.
Thank you all... =)
answered Nov 25 '18 at 16:42
joy sjoy s
1
add a comment |
0
0
0
Ok,
the thing is that when you use angular with components and services, one component can't declare the DataTable Element to another component running in the same page.
the solution was to create a outside (Global) service and pass all the component variables.
then running all the functions in the Service with the component variables and child's.
Thank you all... =)
answered Nov 25 '18 at 16:42
joy sjoy s
1
Ok,
the thing is that when you use angular with components and services, one component can't declare the DataTable Element to another component running in the same page.
the solution was to create a outside (Global) service and pass all the component variables.
then running all the functions in the Service with the component variables and child's.
Thank you all... =)
answered Nov 25 '18 at 16:42
joy sjoy s
1
answered Nov 25 '18 at 16:42
joy sjoy s
1
answered Nov 25 '18 at 16:42
joy sjoy s
1
answered Nov 25 '18 at 16:42
joy sjoy s
1
1
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304985%2fangular-6-datatable-refresh-data-in-table-after-outside-filtering%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
What is the npm package that you are using for your
datatablefeature?– Daniel W Strimpel
Nov 14 '18 at 17:21
can you not render this table or can you not filter the table after the table is shown?
– Yong
Nov 14 '18 at 18:07
@Yong i can filter the table.
– joy s
Nov 17 '18 at 19:28
@DanielWStrimpel i'm using "angular-datatables": "^6.0.1"
– joy s
Nov 17 '18 at 19:36
That library is showing on its documentation that you need to first destroy the table and then trigger the next render. Have you tried that? l-lin.github.io/angular-datatables/#/advanced/rerender
– Daniel W Strimpel
Nov 19 '18 at 17:28