Угловой 7
"datatables.net-dt": "^ 1.10.19",
Угловой Datatable
import { Component, OnInit,Injectable ,AfterViewInit,ViewChild,OnDestroy} from '@angular/core';
import { Title } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs';
class DataTablesResponse {
data: any[];
draw: number;
recordsFiltered: number;
recordsTotal: number;
}
@Component({
selector: 'app-cheques',
templateUrl: './cheques.component.html',
styleUrls: ['./cheques.component.css']
})
export class ChequesComponent implements AfterViewInit,OnDestroy,OnInit {
@ViewChild(DataTableDirective)
public openForm = 0;
dtOptions: DataTables.Settings = {};
cheques: Cheque[] = [];
dtElement: DataTableDirective;
dtTrigger: Subject<any> = new Subject();
constructor(private title: Title,private http: HttpClient) { }
ngOnInit() {
this.title.setTitle('WalletCheques - Cheques');
const that = this;
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
serverSide: true,
processing: false,
ajax: (dataTablesParameters: any, callback) => {
that.http
.post<DataTablesResponse>(
'http://localhost/wallet-cheques/api/get-cheques',
dataTablesParameters, {}
).subscribe(resp => {
that.cheques = resp.data;
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: []
});
});
},
columns: [
{ data: 'cheque_id',orderable: false},
{ data: 'amount',orderable: false},
{ data: 'lastName',orderable: false }
]
}
}
rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
// Destroy the table first
dtInstance.destroy();
// Call the dtTrigger to rerender again
this.dtTrigger.next();
});
}
Iхочу обновить таблицу, как метод рисования I, когда нажимаю кнопку.
Ошибка получения документации, например ChequesComponent.html: 20 ОШИБКА TypeError: Невозможно прочитать свойство 'dtInstance' из неопределенного