我正在尝试使用新的dtOptions更新(渲染)角度数据表
<button type="button" class="btn btn-success m-r-sm" id="filter" (click)="filter()">
{{'apply' | translate}}
</button>
filter() {
const that = this;
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 20,
serverSide: true,
processing: true,
searching: false,
ajax: (dataTablesParameters: any, callback) => {
that.service.getExtendedCdrByCriteria(this.selectedDirection, this.selectedDisposition, this.caller, this.calledNumber, this.from, this.to, dataTablesParameters).subscribe(resp => {
that.extendedCdrs = resp.data;
console.log('ajax call');
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: []
});
});
},
columns: [
{ data: 'direction' },
{ data: 'datetime' },
{ data: 'callerNumber' },
{ data: 'calledNumber' },
{ data: 'timeOnHold' },
{ data: 'callTotalTime' },
{ data: 'trunkName' },
{ data: 'disposition' },
{ data: 'recordingfile' }
],
};
this.rerender();
}
rerender(): void {
try {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.destroy();
this.dtTrigger.next();
});
} catch (err) {
console.log(err);
}
}
[当我第一次单击按钮时,没有执行ajax调用,并且使用相同的数据重新呈现表,但是当第二次单击按钮时,this.dtOptions将更新并使用正确的更新数据重新呈现表。如何使其运行在第一个按钮上单击?
我认为您的rerender()
方法的执行速度快于ajax完成的速度。尝试完全删除rerender()
方法。