CODEWITHSUNDEEP
htmlangulardatatableangular6render
JoySalomon
JoySalomon

Reputation: 61

Angular 6 Datatable refresh data in table after outside filtering

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>&nbsp;NAME</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let row of rows">
    <td>{{ row.Name }}</td>
  </tr>
  </tbody>
</table>

Upvotes: 0

Views: 7726

Answers (3)

Naveen Roy
Naveen Roy

Reputation: 95

This is best way to refresh data on search .. or dynamic loading

angular-datatables/#/advanced/rerender

Upvotes: 1

Jaydeepsinh Makwana
Jaydeepsinh Makwana

Reputation: 29

datatable refresh
Click on button press table grid refresh

$('#Clienttbl').dataTable().fnClearTable();

Upvotes: -1

JoySalomon
JoySalomon

Reputation: 61

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... =)

Upvotes: 1

Related Questions