CODEWITHSUNDEEP
angulardatatable
Radha Krishnan
Radha Krishnan

Reputation: 21

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

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.

Upvotes: 1

Views: 3339

Answers (2)

Sushant Gupta
Sushant Gupta

Reputation: 1

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);
   }
   );

Upvotes: 0

coDe murDerer
coDe murDerer

Reputation: 1876

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;    
          });
        }
    };

}

Upvotes: 1

Related Questions