问题描述
我将Datatable用作组件，以便可以在所有模板中使用它。我有以下文件：
table.component.ts
import * as _ from "lodash";
import { Observable,Subject,merge } from 'rxjs';
import { Component,OnInit,ViewChild,Renderer2,Input,Output,EventEmitter,ContentChild,ElementRef } from "@angular/core";
import { DataTableDirective } from "angular-datatables";
import { TableActionEvent } from "../../types/table/table.actions";
@Component({
selector: "common-table",templateUrl: "./table.component.html",styleUrls: ["./table.component.scss"],})
export class TableComponent implements OnInit {
public dtOptions: DataTables.Settings = {};
public dtTrigger: Subject<any> = new Subject();
public _data: Array<any>;
public _settings: any;
public _loading: boolean;
@ViewChild(DataTableDirective,{ static: false }) private datatableElement: DataTableDirective;
/**
* Grid data with pagination Meta
*/
@input()
set data(data: any) {
if (data) {
this._data = data;
}
}
get data(): any {
return this._data;
}
/**
* Grid data with pagination Meta
*/
@input()
set settings(data: any) {
if (data) {
this._settings = data;
}
}
get settings(): any {
return this._settings;
}
@input()
set loading(loading: boolean) {
this._loading = loading;
setTimeout(() => {
$('#releaseDatatable').DataTable().destroy();
this.dtTrigger.next();
},100);
}
get loading(): boolean {
return this._loading;
}
@Output() public event: EventEmitter<TableActionEvent<any>> = new EventEmitter<TableActionEvent<any>>();
/**
* DashboardComponent constructor
*/
constructor(
private renderer: Renderer2,private elem: ElementRef
) { }
/**
* @memberof DashboardComponent
*/
public ngOnInit(): void {
this.dtOptions = {
info: false,order: []
};
}
/**
*
*/
cellRender(render,row) {
if (_.isstring(render)) {
return render;
}
if (_.isFunction(render)) {
return render(row);
}
}
/**
* @param $event
*/
public search($event) {
const term = $event.target.value;
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.search(term).draw();
});
}
/**
* On Table Action
*
* @param {string} action
* @param {T} row
* @param {number} index
*
* @memberof AdminGridComponent
*/
public onAction(action: string,row: any): void {
const tableActionItem: any = {
action: action,row: row
};
this.event.emit(tableActionItem);
}
rerender() {
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.destroy();
this.dtTrigger.next();
});
}
ngAfterViewInit(): void {
this.dtTrigger.next();
}
ngOnDestroy(): void {
// Do not forget to unsubscribe the event
this.dtTrigger.unsubscribe();
}
}
和模板文件 table.component.html 如下：
<div class="ma-datatables">
<form>
<div class="d-flex align-items-center app-login_input-layout">
<input class="form-control app-login_input-style rm-release_search-bar" type="search" id="release-search"
placeholder="Search here..." (keyup)=search($event)>
<i class="material-icons rm-release_search-icon">search</i>
</div>
</form>
<div class="table-responsive">
<div *ngIf="!loading">
<table class="table animate__animated animate__fadeIn" id="releaseDatatable" datatable
[dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
<thead>
<tr>
<th *ngFor="let header of settings.columns">{{ header.title }}</th>
<th *ngIf="settings.actions">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let release of data">
<ng-container *ngFor="let column of settings.columns">
<td class="rm-release_table-cell" [style.width]=column.width>
<div>
<p *ngIf="column.dataType !='html'" class="rm-release_data-id">
{{release[column.field]}}
</p>
<span *ngIf="column.dataType =='html'">
<div innerHTML="{{ cellRender(column.render,release) }}"></div>
</span>
</div>
</td>
</ng-container>
<td class="rm-release_table-cell" *ngIf="settings.actions">
<div>
<a id="release-action" href="javascript:void(0)" (click)="openAction($event)">
<i class="material-icons">more_vert</i>
</a>
<div class="rm-release_action-layout hidden" #actionSlide
id="release-{{release[settings.columns[0].field]}}">
<div class="rm-release_action-container animate__animated" #actionContainer>
<div
class="d-flex align-items-center justify-content-between rm-release_action-header">
<a class="rm-release_action-close" href="javascript:void(0)"
(click)="closeAction($event)">
<i class="material-icons">close</i>
</a>
</div>
<div class="rm-release_action-item-layout">
<div class="rm-release_action-item-layout">
<ng-container *ngIf="release.permitted_actions;else actionMenu">
<ng-container *ngFor="let action of settings.actions">
<div *ngIf="release.permitted_actions.includes(action.action)"
class="d-flex align-items-center rm-release_action-item"
(click)="onAction(action.action,release)">
<i class="material-icons">{{action.icon}}</i>
<p>{{action.title}}</p>
</div>
</ng-container>
</ng-container>
<ng-template #actionMenu>
<ng-container *ngFor="let action of settings.actions">
<div class="d-flex align-items-center rm-release_action-item"
(click)="onAction(action.action,release)">
<i class="material-icons">{{action.icon}}</i>
<p>{{action.title}}</p>
</div>
</ng-container>
</ng-template>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
并且我正在使用此组件，如下所示：
<common-table [data]="items" [settings]="settings" [loading]="isLoading"
(event)="onGridEvent($event)">
</common-table>
现在我在这里面临多个问题：
-
有时会显示
DataTables warning: table id=releaseDatatable - Cannot reinitialise DataTable. For more @R_687_4045@ion about this error,please see http://datatables.net/tn/3"
如果有人可以帮助我解决此问题，这将非常有帮助。我正在使用Angular Datatables软件包。
解决方法
似乎有两个不同的问题；
第二个错误DataTables warning: table id=releaseDatatable - Cannot reinitialise DataTable表示您正在使用多个具有相同ID的dataTable。
当您加载多个dataTable组件时，很可能会遇到此错误。
要解决此问题，您应该生成一种识别每个唯一数据表的方法，例如声明一个变量计数器，并在绑定到html中的$('#releaseDatatable' + counter).DataTable().destroy();时获取dataTable时调用[attr.id]='"releaseDatatable" + counter'
第一个错误将归因于以下代码
$('#releaseDatatable').DataTable().destroy();
this.dtTrigger.next();
考虑上面的问题2，其中您正在加载具有相同ID的相同HTMLElement。销毁元素后，调用this.dtTrigger.next();将不存在任何元素，因此错误No data available in table
为dataTable设置唯一的ID应该可以解决这两个问题