How to refresh jquery data table in Angular 6 after event performed

Question

I have integrated Jquery Data table in my Angular 6 application,How to refresh jquery datatable in angular 6 app after event performed like delete and update records In Datatable

HTML

<table  class="table table-hover" datatable [dtOptions]="dtOptions"
  [dtTrigger]="dtTrigger" cellspacing="0" >
  <thead>
    <tr>
      <th>Country Name</th>
      <th>Country Code</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let country of country$">
      <td>{{ country.sCountryName }}</td>
      <td>{{ country.sCountryCode }}</td>
      <td  *ngIf="country.isActive"> Active </td>
      <td  *ngIf="!country.isActive"> In Active</td>
      <td><a  class="btn btn-default" (click)="openedit(editcontent,country)" ><i class="glyphicon glyphicon-pencil" ><span class="i-text">Edit</span></i></a>&nbsp;&nbsp;&nbsp;<a  class="btn btn-default" rel="nofollow" href="javascript:void(0)" (click)="deleteCountry(country)"><i class="glyphicon glyphicon-trash" ><span class="i-text">Delete</span></i></a></td>
    </tr>
  </tbody>
</table>

Component.ts

ngOnInit() {
    this.getallCountries();
}

getallCountries(){            
    this.dtOptions = {
        dom: '<"table-search-left"f><"table-count-right"l>tip',
        pagingType: 'full_numbers',
        pageLength: 10,
        processing: true 
    };
    this.crudservice.getCountryList().subscribe(data => {
        this. country$ = data;    
    });
}


deleteCountry(country) {             
    this.http.delete('https://localhost:8444/api/config/country/delete/'+country.iCountryID)
    .subscribe(res => {
    this.rerender();
    }, (err) => {
        console.log(err);
    }
    );
}
rerender(): void {
    console.log('this');
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.draw();
    });
}

I'm going to delete country and call rerender function but datatable not refreshed.

coDe murDerer · Accepted Answer · 2019-01-30 10:14:23Z

1

Add this function to your .ts file

If datatable initialisation is like as bellow

 // Datatable
      @ViewChild(DataTableDirective)
      dtElement: DataTableDirective;
      dtOptions: DataTables.Settings = {};
      dtTrigger: Subject<any> = new Subject();

Refresh datatable function

rerender_datatable() {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.draw();
    });
  }

After performing any action like delete or update record call this function rerender_datatable as following

deleteRecord(){
  // Other Code of delete
  this.rerender_datatable();
}

This will refresh datatable

Update 1 (Because of question updated)

Replace your getallCountries function with this

getallCountries(){            
    this.dtOptions = {
        dom: '<"table-search-left"f><"table-count-right"l>tip',
        pagingType: 'full_numbers',
        pageLength: 10,
        processing: true,
        ajax: (dataTablesParameters: any) => {
          this.crudservice.getCountryList().subscribe(data => {
              this. country$ = data;    
          });
        }
    };

}

edited Jan 30, 2019 at 10:14

answered Jan 30, 2019 at 7:59

coDe murDerer

1,8744 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

coDe murDerer Over a year ago

WC, If its solve your issue then you can upvote and approve answer

coDe murDerer Over a year ago

You have changed your question. Anyways does this "console.log('this');" console worked? show your datatable initialisation code

coDe murDerer Over a year ago

Your code is not working because your result data is not part of dtOptions

Radha Krishnan Over a year ago

@ViewChild(DataTableDirective) dtElement: DataTableDirective; country$: any[] = []; dtOptions: DataTables.Settings = {};

Daryl Over a year ago

Thank you.This helped to solve my problem.Additional to this i think following code should be added to ngAfterViewInit method.For example ngAfterViewInit method will look like this after adding the code. ngAfterViewInit(): void { if (this.tableElement) { this.dtTrigger.next(); }}

Sushant Gupta · Accepted Answer · 2019-10-18 16:51:06Z

HTML

give id to table tag first

<table id="example" class="table table-hover" datatable [dtOptions]="dtOptions"
[dtTrigger]="dtTrigger" cellspacing="0" > //give id to table <---
<thead>
<tr>
  <th>Country Name</th>
  <th>Country Code</th>
  <th>Status</th>
  <th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let country of country$">
  <td>{{ country.sCountryName }}</td>
  <td>{{ country.sCountryCode }}</td>
  <td  *ngIf="country.isActive"> Active </td>
  <td  *ngIf="!country.isActive"> In Active</td>
  <td><a  class="btn btn-default" (click)="openedit(editcontent,country)" ><i class="glyphicon glyphicon-pencil" ><span class="i-text">Edit</span></i></a>&nbsp;&nbsp;&nbsp;<a  class="btn btn-default" rel="nofollow" href="javascript:void(0)" (click)="deleteCountry(country)"><i class="glyphicon glyphicon-trash" ><span class="i-text">Delete</span></i></a></td>
</tr>
</tbody>
</table>

TS

 deleteCountry(country) {             
 this.http.delete('https://localhost:8444/api/config/country/delete/'+country.iCountryID)
  .subscribe(res => {
    this.country$.length = 0 //empty array first and use this before getting response
    this. country$ = res // assuming you are getting response in this array
    $('#example').DataTable().destroy()  <---table id & use this after getting response
    this.dtTrigger.next()
   }, 
   (err) => {
   console.log(err);
   }
   );

Collectives™ on Stack Overflow

How to refresh jquery data table in Angular 6 after event performed

HTML

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related