Pfthb

Actaully I have the data that are fetched through api and are being displayed in datatable in angular.I need to show the two tables in same html page so I have used two datatables but in one of those table I get "No data available in table". If i use single table then there is not this problem.

component.ts file

 constructor(private http: HttpClient,private assignmentAuditService: AssignmentAuditService,private selectionService: SelectionService,
 private chRef: ChangeDetectorRef, private chRef1: ChangeDetectorRef,
 private authService:LoginAuthService,private auditGroupService:AuditGroupService) 
 this.authService.isLoggedIn();

 

 ngOnInit() 

 this.http.get('http://localhost:8080/api/auditgroup')
 .subscribe((data: any) => 
 this.auditorgroups = data;
 console.log(this.auditorgroups);
 );

 //i have called the api to load data into datatable here this.http.get
('http://localhost:8080/api/selections/getAllNonAuditGroupSelections')
 .subscribe((data: any) => 
 this.clients = data;
 console.log(this.clients);

 // You'll have to wait that changeDetection occurs and projects data into 
 // the HTML template, you can ask Angular to that for you ;-)
 this.chRef.detectChanges();

 // Now you can use jQuery DataTables :
 const table: any = $('table');
 this.dataTable = table.DataTable();
 );

 /* for auditgroup selecitonm */

 //i have called the api to load data into datatable here 
 this.http.get('http://localhost:8080/api/selections/getAllAuditGroupSelections')
 .subscribe((datas: any) => 
 this.nonAuditSelection = datas;
 console.log(this.nonAuditSelection);

 // You'll have to wait that changeDetection occurs and projects data into 
 // the HTML template, you can ask Angular to that for you ;-)
 this.chRef1.detectChanges();

 // Now you can use jQuery DataTables :
 const table: any = $('table');
 this.dataTable = table.DataTable();
 );

 

html to display table

<h5>Selection Without Audit Group</h5>
 <div class="card-body">

 <div class="col-md-12">
 <table class="table table-bodered">

 <thead>
 <tr>
 <th>Selection No</th>
 <th>SelectionDate</th>
 <th> SelectedBy</th>
 <th>PanEximNumber</th>
 <th>Name</th>
 <th>Address</th>
 <th>PhoneNumber</th>
 <th>SelectionType</th>
 <!-- <th>Action</th> -->

 </tr>
 </thead>
 <tbody>
 <tr *ngFor="let client of clients" (click)="onClick(client)">
 <td [ngStyle]="getStyle(this.client)">client.selectionId</td>
 <!--*ngIf="!client.auditorGroup" [ngClass]="'myclass2': client.auditorGroup, 'myclass1': !client.auditorGroup"-->
 <td [ngStyle]="getStyle(this.client)">client.selectionDate</td>
 <td [ngStyle]="getStyle(this.client)">client.selectedBy</td>
 <td [ngStyle]="getStyle(this.client)">client.panEximNumber</td>
 <td [ngStyle]="getStyle(this.client)">client.name</td>
 <td>client.address</td>
 <td>client.phoneNumber</td>
 <td>client.selectionType</td>
 <!-- <td *ngIf="!client.auditorGroup" [ngStyle]="getStyle(this.client)">Edit
 Delete</td> -->

 </tr>


 </tbody>

 </table>
 </div>
 </div>

 <div class="card-body">

 <div class="col-md-12">
 <table class="table table-bodered">

 <thead>
 <tr>
 <th>Selection No</th>
 <th>SelectionDate</th>
 <th> SelectedBy</th>
 <th>PanEximNumber</th>
 <th>Name</th>
 <th>Address</th>
 <th>PhoneNumber</th>
 <th>SelectionType</th>
 <!-- <th>Action</th> -->

 </tr>
 </thead>
 <tbody>
 <tr *ngFor="let nonAudit of nonAuditSelection">
 <td>nonAudit.selectionId</td>
 <!--*ngIf="!client.auditorGroup" [ngClass]="'myclass2': client.auditorGroup, 'myclass1': !client.auditorGroup"-->
 <td>nonAudit.selectionDate</td>
 <td>nonAudit.selectedBy</td>
 <td>nonAudit.panEximNumber</td>
 <td>nonAudit.name</td>
 <td>nonAudit.address</td>
 <td>nonAudit.phoneNumber</td>
 <td>nonAudit.selectionType</td>
 <!-- <td *ngIf="!client.auditorGroup" [ngStyle]="getStyle(this.client)">Edit
 Delete</td> -->

 </tr>


 </tbody>

 </table>
 </div>
 </div>

Table is diplayed as :

The api datas are coming right as here is no problem :

The issue is with the jQuery selector you are using, try this:

1. 
   

   Add id to each table as below:

   
   
   

   <table id="table1" class="table table-bodered">

   
   
   

   <table id="table2" class="table table-bodered">

   
   


2. 
   

   In your .ts change selector as below for the relevant api data to show:

   
   
   

   const table: any = $('#table1');

   
   
   

   const table: any = $('#table2');

   
   

Currently, as you are always selecting a table: $('table) jquery selects one table and renders data to it. Hope it helps.