Angular Datatables вручную перезагружает (рисует) таблицу нажатием кнопки - PullRequest
0 голосов
/ 22 марта 2019

Угловой 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' из неопределенного

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...