I am currently working on an Angular 4 project where I need to display data in a table format using the DataTables library. While I have successfully implemented the hardcoded examples provided by DataTables with all the buttons functioning as expected, I am encountering issues when trying to display dynamic data fetched from an SQL database via a service.
Here is a snippet of my HTML code:
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Zip Code</th>
<th>Submitted Date/Time</th>
<th>Submission Status</th>
<th>Extra</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of participants">
<td>{{ p.firstName }} {{ p.middleName }} {{ p.lastName }}</td>
<td>{{ p.age }}</td>
<td>{{ p.zip }}</td>
<td>{{ p.createdDateTime | date:'short' }}</td>
<td>{{ p.projectStatus }}</td>
<td>Ask</td>
</tr>
</tbody>
In addition, this is an excerpt from my component.ts file:
import { ParticipantService } from './../../_services/participant.service';
import { Component, OnInit } from '@angular/core';
declare const $;
@Component({
selector: 'app-participant-list-demo',
templateUrl: './participant-list-demo.component.html',
styleUrls: ['./participant-list-demo.component.css']
})
export class ParticipantListDemoComponent implements OnInit {
participants: any[];
constructor(
private participantService: ParticipantService
) { }
ngOnInit() {
this.loadStyles();
this.loadParticipants();
}
loadParticipants() {
this.participantService.getAll().subscribe(participants => {
this.participants = participants;
});
}
loadStyles() {
$(function () {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
});
}
}
Despite attempting to use various techniques such as Zones, I have not been able to achieve functionality for the DataTables buttons with dynamic data. How can I properly integrate my dynamically loaded data into DataTables to ensure the buttons work as intended?