Question

我已在Angular 6应用程序中集成了Jquery数据表，如何在事件执行后（如删除和更新Datatable中的记录）刷新Angular 6应用程序中的jQuery数据表

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

我要删除国家/地区并调用重新呈现功能，但数据表未刷新。

Answer 1

将此功能添加到您的.ts文件中

如果数据表初始化像下面这样

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

刷新数据表功能

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

在执行删除或更新记录之类的任何操作后，请按以下方式调用此功能rerender_datatable

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

这将刷新数据表

更新1 （由于问题已更新）

以此替换您的getallCountries函数

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

}

Answer 2

HTML

首先将ID赋予表格标签

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

事件执行后如何刷新Angular 6中的jquery数据表

HTML

2 个答案: