我们正在使用angular的datatablejs插件在我们的项目https://l-lin.github.io/angular-datatables/#/getting-started中列出数据;某些事件需要在datalist中刷新数据。
这是在jquery上使用datatable js，我们用服务来销毁它并重新加载它。
使用angular，数据不会更改，除非单击任何列或重新加载页面，这对我们来说是个问题。
怎么解决这个问题。
我们不希望转移到材料表，因为有许多组件需要修复。
HTML：
<!-- For tabs changes -->
<mat-tab-group>
<mat-tab label="Draft">
<div class="row">
<div class="col-md-12"><br />
<table datatable [dtOptions]="draftdtOptions" [dtTrigger]="dtTrigger"
class="mahait-table row-border hover">
<thead class="dt-head-center">
</thead>
<tbody class="dt-body-center">
<tr *ngFor="let createCal of createCals let row">
<td>
<button type="button"
class="btn btn-info btn-sm reject-button-alignment m-btn-body mt-1"
style="margin-top:1px"
(click)="open(row,$event,modal_edit_academic_calen_details)">Edit</button>
<button type="submit" class="btn btn-danger reject-button-alignment mt-1"
style="margin-left:5px;" (click)="openDelete(row,$event)">Delete</button><br />
<button type="button" class="btn btn-update reject-button-alignment mb-1"
style="margin-top:4px"
(click)="someClickHandler(row,$event,modal_update_event_details)">Update
Events</button>
<button type="button" (click)=openSendApprove(row,$event,modal_action_details)
class="btn btn-success reject-button-alignment mb-1"
style="margin-top:3px; margin-left:5px;">Send
for
Apporval</button>
</td>
<td>{{ createCal.AcademicYear }}</td>
<td> <a style="color:blue; cursor: pointer;"
(click)="openView(row,$event,modal_view_academic_calen_details)">{{ createCal.CalendarCode }}</a>
</td>
<td>{{ createCal.EventCount }}</td>
<td>{{ createCal.CalandarType }}</td>
<td>{{ createCal.calendar_name }}</td>
<td>{{ createCal.created_on | date : 'yyyy-MM-dd' }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</mat-tab>
<mat-tab label="Send for Approval">
<div class="row">
<div class="col-md-12"><br />
<table id="second-table" datatable [dtOptions]="SendApproveldtOptions"
class="mahait-table row-border hover">
<thead class="dt-head-center"></thead>
<tbody class="dt-body-center">
<tr *ngFor="let sendTable of sendTables let row">
<td>{{ sendTable.AcademicYear }}</td>
<td><a style="color:blue; cursor: pointer;"
(click)="openView(row,$event,modal_view_academic_calen_details)">{{ sendTable.CalendarCode }}</a>
</td>
<td>{{ sendTable.EventCount }}</td>
<td>{{ sendTable.CalandarType }}</td>
<td>{{ sendTable.calendar_name }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</mat-tab>
</mat-tab-group>
<!-- End tabs changes -->
TS：
// code starts here
import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; // Data Table
import { FormArray, FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';
import { AcmServiceService } from '../../Shared/acm-service.service';
import { NgbModalConfig, NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { DatePipe } from '@angular/common';
import Swal from 'sweetalert2';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables'; // Data Table
import { Subject } from 'rxjs';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { MatTable } from '@angular/material/table';
import { RouterLinkWithHref } from '@angular/router';
import { Router } from '@angular/router';
class DataTablesResponse {
data: any[];
draw: number;
recordsFiltered: number;
recordsTotal: number;
}
class createCal {
AcademicYear: any;
CalendarCode: any;
EventCount: any;
CalandarType: any;
calendar_name: any;
created_o_n: any;
}
class sendTable {
AcademicYear: any;
CalendarCode: any;
EventCount: any;
CalandarType: any;
calendar_name: any;
}
export class AcmManageAcademicCalendarComponent implements AfterViewInit, OnDestroy, OnInit {
@ViewChild(DataTableDirective) // Data Table
dtElement: DataTableDirective; // Data Table
draftdtOptions: DataTables.Settings = {}; // First Data Table
SendApproveldtOptions: DataTables.Settings = {}; // Second Data Table
dtTrigger: Subject<boolean> = new Subject(); // First Data Table Trigger
dtTrigger2: Subject<boolean> = new Subject(); // Second Data Table Trigger
userData = { organisation_id: '1', requestStatusID: '1' };
userData1 = { organisation_id: '1', requestStatusID: '2' };
constructor(private Service: AcmServiceService, private http: HttpClient, private router: Router) {
}
ngOnInit() {
this.dataTableAngulr();
this.sendTabale();
}
// FIrst Data Table Call
dataTableAngulr() {
const that = this;
this.draftdtOptions = {
pagingType: 'full_numbers',
pageLength: 4,
serverSide: true,
processing: true,
search: true,
ajax: (dataTablesParameters: any, callback) => {
that.http
.post<DataTablesResponse>(
'http://fakeapiorg/api/acm/CalendarList', Object.assign(dataTablesParameters, this.userData), {}
).subscribe(resp => {
that.createCals = resp.data;
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: []
});
});
},
columns: [
{ data: '', title: 'Action', name: 'ay.academic_start_year' },
{ data: 'AcademicYear', title: 'Academic Year', name: 'academic_start_year' },
{ data: 'CalendarCode', title: 'Calendar ID', name: 'calendar_id' },
{ data: 'EventCount', title: 'Events Count', name: 'EventCount' },
{ data: 'CalandarType', title: 'Academic Calendar Type', name: 'ct.taxonomy_name' },
{ data: 'calendar_name', title: 'Calendar Name', name: 'ac.calendar_name' },
{ data: 'created_on', title: 'Modified Date', name: 'ac.created_on' }
],
};
}
ngAfterViewInit(): void {
this.dtTrigger.next();
this.dtTrigger2.next();
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
this.dtTrigger2.unsubscribe();
}
rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.destroy();
this.dtTrigger.next();
this.dtTrigger2.next(); // Second Table call for rerender
});
}
// Second Data Table
sendTabale() {
const that = this;
this.SendApproveldtOptions = {
pagingType: 'full_numbers',
pageLength: 4,
serverSide: true,
processing: true,
search: true,
ajax: (dataTablesParameters: any, callback) => {
that.http
.post<DataTablesResponse>(
'http://fakeapiorg/api/acm/CalendarList', Object.assign(dataTablesParameters, this.userData1), {}
).subscribe(resp => {
that.sendTables = resp.data;
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: []
});
});
},
columns: [
{ data: 'AcademicYear', title: 'Academic Year', name: 'academic_start_year' },
{ data: 'CalendarCode', title: 'Calendar ID', name: 'calendar_id' },
{ data: 'EventCount', title: 'Events Count', name: 'EventCount' },
{ data: 'CalandarType', title: 'Academic Calendar Type', name: 'ct.taxonomy_name' },
{ data: 'calendar_name', title: 'Calendar Name', name: 'ac.calendar_name' }
]
};
}
}
Send_Approve_Adademic() {
this.sendApproveObj = {
RequestID: this.request_id,
RequestStatusID: '2'
}
this.Service.create('AcademicCalandarStatusChange', this.sendApproveObj).subscribe(res => {
if (res['status'] == true) {
Swal.fire({
type: 'success',
title: ' Successfully Send Approvel',
onClose: () => {
this.GetAPI();
this.modalRef3.close();
}
})
}
this.rerender(); // call The Rerender table
})
}
// code ends here
这似乎是一个变化检测问题。您可能需要手动检测API调用所做的更改。
用以下内容替换组件代码：
import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core'; // Data Table
import { FormArray, FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';
import { AcmServiceService } from '../../Shared/acm-service.service';
import { NgbModalConfig, NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { DatePipe } from '@angular/common';
import Swal from 'sweetalert2';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables'; // Data Table
import { Subject } from 'rxjs';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { MatTable } from '@angular/material/table';
import { RouterLinkWithHref } from '@angular/router';
import { Router } from '@angular/router';
class DataTablesResponse {
data: any[];
draw: number;
recordsFiltered: number;
recordsTotal: number;
}
class createCal {
AcademicYear: any;
CalendarCode: any;
EventCount: any;
CalandarType: any;
calendar_name: any;
created_o_n: any;
}
class sendTable {
AcademicYear: any;
CalendarCode: any;
EventCount: any;
CalandarType: any;
calendar_name: any;
}
export class AcmManageAcademicCalendarComponent implements AfterViewInit, OnDestroy, OnInit {
@ViewChild(DataTableDirective) // Data Table
dtElement: DataTableDirective; // Data Table
draftdtOptions: DataTables.Settings = {}; // First Data Table
SendApproveldtOptions: DataTables.Settings = {}; // Second Data Table
dtTrigger: Subject<boolean> = new Subject(); // First Data Table Trigger
dtTrigger2: Subject<boolean> = new Subject(); // Second Data Table Trigger
userData = { organisation_id: '1', requestStatusID: '1' };
userData1 = { organisation_id: '1', requestStatusID: '2' };
constructor(private Service: AcmServiceService, private http: HttpClient, private router: Router,
private cdREf: ChangeDetectorRef) {
}
ngOnInit() {
this.dataTableAngulr();
this.sendTabale();
}
// FIrst Data Table Call
dataTableAngulr() {
const that = this;
this.draftdtOptions = {
pagingType: 'full_numbers',
pageLength: 4,
serverSide: true,
processing: true,
search: true,
ajax: (dataTablesParameters: any, callback) => {
that.http
.post<DataTablesResponse>(
'http://fakeapiorg/api/acm/CalendarList', Object.assign(dataTablesParameters, this.userData), {}
).subscribe(resp => {
that.createCals = resp.data;
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: []
});
this.cdREf.markForCheck();
});
},
columns: [
{ data: '', title: 'Action', name: 'ay.academic_start_year' },
{ data: 'AcademicYear', title: 'Academic Year', name: 'academic_start_year' },
{ data: 'CalendarCode', title: 'Calendar ID', name: 'calendar_id' },
{ data: 'EventCount', title: 'Events Count', name: 'EventCount' },
{ data: 'CalandarType', title: 'Academic Calendar Type', name: 'ct.taxonomy_name' },
{ data: 'calendar_name', title: 'Calendar Name', name: 'ac.calendar_name' },
{ data: 'created_on', title: 'Modified Date', name: 'ac.created_on' }
],
};
}
ngAfterViewInit(): void {
this.dtTrigger.next();
this.dtTrigger2.next();
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
this.dtTrigger2.unsubscribe();
}
rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.destroy();
this.dtTrigger.next();
this.dtTrigger2.next(); // Second Table call for rerender
});
}
// Second Data Table
sendTabale() {
const that = this;
this.SendApproveldtOptions = {
pagingType: 'full_numbers',
pageLength: 4,
serverSide: true,
processing: true,
search: true,
ajax: (dataTablesParameters: any, callback) => {
that.http
.post<DataTablesResponse>(
'http://fakeapiorg/api/acm/CalendarList', Object.assign(dataTablesParameters, this.userData1), {}
).subscribe(resp => {
that.sendTables = resp.data;
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: []
});
this.cdREf.markForCheck();
});
},
columns: [
{ data: 'AcademicYear', title: 'Academic Year', name: 'academic_start_year' },
{ data: 'CalendarCode', title: 'Calendar ID', name: 'calendar_id' },
{ data: 'EventCount', title: 'Events Count', name: 'EventCount' },
{ data: 'CalandarType', title: 'Academic Calendar Type', name: 'ct.taxonomy_name' },
{ data: 'calendar_name', title: 'Calendar Name', name: 'ac.calendar_name' }
]
};
}
}
Send_Approve_Adademic() {
this.sendApproveObj = {
RequestID: this.request_id,
RequestStatusID: '2'
}
this.Service.create('AcademicCalandarStatusChange', this.sendApproveObj).subscribe(res => {
if (res['status'] == true) {
Swal.fire({
type: 'success',
title: ' Successfully Send Approvel',
onClose: () => {
this.GetAPI();
this.modalRef3.close();
}
})
}
this.rerender(); // call The Rerender table
})
}