请有人在这里帮助。 DataTable显示“表中没有可用数据” 我只是尝试将这个很棒的插件实现到我的项目中。看起来真的很棒。 但是,在加载表数据并且尝试对列进行排序后,“表中没有可用数据”仍然出现,所有数据都消失了。
import { Component,ViewChild, ElementRef, OnInit} from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { GroupService } from './Service/group.service';
import { NgForm } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { IGroup } from './Models/Groups';
declare var $;
@Component({
selector: 'app-master-group',
templateUrl: './master-group.component.html',
styleUrls: ['./master-group.component.scss']
})
export class MasterGroupComponent implements OnInit {
title = 'ATMS';
@ViewChild('dataTable') table;
dataTable: any;
dtOptions: any;
constructor(http: HttpClient, private _groupService : GroupService,
private toastr : ToastrService) {
}
ngOnInit() {
this.resetForm();
this.dtOptions = this._groupService.getGroup();
this.dataTable = $(this.table.nativeElement);
this.dataTable.DataTable(this.dtOptions);
}
resetForm(form?:NgForm){
if(form!=null)
form.resetForm();
this._groupService.formData = {
groupId: 0,
groupName: '',
isActive: false,
createdBy: '',
createdOn: null,
modifiedBy: '',
modifiedOn: null,
timestamp: ''
}
}
onSubmit(form: NgForm){
if(form.value.groupId == 0)
this.insertReord(form);
else
this.updateReord(form);
}
insertReord(form: NgForm){
this._groupService.postGroup(form.value).subscribe(response=> {
this.toastr.success('Record inserted successfully !', 'ATMS 3.0');
this.resetForm(form);
this._groupService.getGroup();
})
}
populateGroupDetails(g:IGroup){
this._groupService.formData = Object.assign({},g);
}
updateReord(form: NgForm){
this._groupService.putGroup(form.value).subscribe(response=> {
this.toastr.info('Record updated successfully !', 'ATMS 3.0');
this.resetForm(form);
this._groupService.getGroup();
});
}
onDelete(id:number){
if(confirm('Are you sure to delete this record?')){
this._groupService.deleteGroup(id).subscribe(response =>{
this.toastr.warning('Data Deleted successfully !','ATMS 3.0');
this._groupService.getGroup();
});
}
}
}
I want to data should be display properly with paging, searching, sorting and filtering.
<table #dataTable class="table table-sm table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Is Active</th>
<th>Group</th>
<th>Created By</th>
<th>Created On</th>
<th>Last Modification</th>
<th>Action(s)</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let g of _groupService.list'>
<td>{{g.groupId}}</td>
<td><label style="visibility: hidden;">{{g.isActive}}</label><i class="intelicon-filled-box text-success" style="font-size: 20px;"></i>
</td>
<td>{{g.groupName}}</td>
<td>{{g.createdBy}}</td>
<td>{{g.createdOn | date }}</td>
<td>{{g.modifiedOn | date }}</td>
<td><button (click)="populateGroupDetails(g)" class="invisible-button" ><i class="intelicon-compose" style="font-size: 16px; color:#00AEEF;"></i></button>
<button (click)="onDelete(g.groupId)" class="invisible-button" ><i class="intelicon-trash-outlined" style="font-size: 16px; color:#ED1C24;"></i></button> </td>
</tr>
</tbody>
</table>