When we add static data in angular datatable all things work fine, but when we load the data table from an API, the pagination, search, and sorting don't work. And it show's "No data available in table", but data is present in the table, also attaching the images.
Here is the HTML Code
<table datatable [dtOptions]="dtOptions" class="datatable-init nowrap nk-tb-list nk-tb-ulist">
<thead>
<tr class="nk-tb-item nk-tb-head">
<th class="nk-tb-col nk-tb-col-check">
<div class="custom-control custom-control-sm custom-checkbox notext">
<input type="checkbox" class="custom-control-input" id="uid" />
<label class="custom-control-label" for="uid"></label>
</div>
</th>
<th class="nk-tb-col"><span class="sub-text">Customer Name</span></th>
<th class="nk-tb-col tb-col-mb">
<span class="sub-text">Phone Number</span>
</th>
<th class="nk-tb-col tb-col-md">
<span class="sub-text">CNIC</span>
</th>
<th class="nk-tb-col tb-col-lg">
<span class="sub-text">Joining Date</span>
</th>
<th class="nk-tb-col tb-col-lg">
<span class="sub-text">Expiry Date</span>
</th>
<th class="nk-tb-col tb-col-lg">
<span class="sub-text">Status</span>
</th>
<th class="nk-tb-col nk-tb-col-tools text-end"></th>
</tr>
</thead>
<tbody >
<tr class="nk-tb-item" *ngFor="let user of allUsers">
<td class="nk-tb-col nk-tb-col-check">
<div class="custom-control custom-control-sm custom-checkbox notext">
<input type="checkbox" class="custom-control-input" id="uid1" />
<label class="custom-control-label" for="uid1"></label>
</div>
</td>
<td class="nk-tb-col">
<span>{{user.customerName}}</span>
</td>
<td class="nk-tb-col tb-col-md">
<span>{{user.phoneNumber}}</span>
</td>
<td class="nk-tb-col tb-col-lg">
<span>{{user.CNIC_Number}}</span>
</td>
<td class="nk-tb-col tb-col-lg">
<span class="badge bg-secondary">{{user.Joining_Date}}</span>
</td>
<td class="nk-tb-col tb-col-md">
<span class="badge bg-danger">{{user.Expiry_Date}}</span>
</td>
<td class="nk-tb-col tb-col-md">
<span class="badge bg-success">Active</span>
</td>
<td class="nk-tb-col nk-tb-col-tools">
<ul class="nk-tb-actions gx-1">
<li>
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-bs-toggle="dropdown"><em
class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li>
<a data-bs-toggle="modal" href="#mViewDetails"><em
class="icon ni ni-eye"></em><span>View
Details</span></a>
</li>
<li>
<a data-bs-toggle="modal" href="#mEditDetails"><em
class="icon ni ni-edit"></em><span>Edit
Details</span></a>
</li>
<li>
<a class="cursor" (click)="Toast.sendReminder()"><em
class="icon ni ni-send"></em><span>Send
Reminder</span></a>
</li>
<li>
<a data-bs-toggle="modal" href="#mChangeStatus"><em
class="icon ni ni-exchange"></em><span>Change Status</span></a>
</li>
<li>
<a href=""><em
class="icon ni ni-delete"></em><span>Delete
User</span></a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</td>
</tr>
<!-- .nk-tb-item -->
</tbody>
</table>
Here is the TS Code
import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { ToastService } from 'src/app/services/toast.service';
import { IDropdownSettings } from 'ng-multiselect-dropdown';
import { UserDetailService } from '../../services/user-detail.service';
import { Inter } from '../../inter';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-view-user',
templateUrl: './view-user.component.html',
styleUrls: ['./view-user.component.css']
})
export class ViewUserComponent implements OnInit {
constructor(public Toast: ToastService,
private userDetails: UserDetailService, private http: HttpClient) {
}
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject<any>();
dropdownList: any = [];
selectedItems = [];
allUsers: Inter[] = [];
dropdownSettings: IDropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: true
};
dataForTable: any;
fetch() {
this.http.get<any>('http://localhost:3000/user').subscribe(data => {
this.dataForTable = data;
console.log(this.dataForTable);
})
}
ngOnInit(): void {
this.dtOptions = {
pagingType: 'full_numbers',
language: {
searchPlaceholder: "Type Into Search"
}
};
this.fetch();
this.dropdownList = [
{ item_id: 1, item_text: 'Naan Shami' },
{ item_id: 2, item_text: 'Chicken Manchurian' },
{ item_id: 3, item_text: 'Pune' },
{ item_id: 4, item_text: 'Navsari' },
{ item_id: 5, item_text: 'New Delhi' }
];
this.get()
}
get() {
this.userDetails.get().subscribe((data) => {
this.allUsers = data;
});
}
delete(id: number) {
this.userDetails.delete(id).subscribe((data) => {
this.allUsers = this.allUsers.filter((_) => _.id !== id);
});
}
}
Here is the users.module.ts Code
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UsersRoutingModule } from './users-routing.module';
import { AddUserComponent } from './components/add-user/add-user.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ViewUserComponent } from './components/view-user/view-user.component';
import { DataTablesModule } from 'angular-datatables';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AddUserComponent,
ViewUserComponent
],
imports: [
CommonModule,
UsersRoutingModule,
NgbModule,
FormsModule,
ReactiveFormsModule,
DataTablesModule,
HttpClientModule,
NgMultiSelectDropDownModule.forRoot(),
]
})
export class UsersModule { }
this.dtTrigger.next()