Incorporating angular-datatables into my Angular 7 application has been a challenge, especially when it comes to displaying search results efficiently.
Within the request-creation-component, a search form is generated. Upon clicking the submit button, an HTTP Post request is dispatched to the backend via a request-service. Subsequently, an observable in the request-service is updated, which the request-result-component subscribes to.
The issue I'm encountering lies in the fact that the datatable used to showcase the results fails to refresh its rows, result count, and pagination buttons when new data is received.
Despite receiving new results, the datatable continues to display the initial set of rows, result count, and pagination controls.
The code in the request-result-component:
requestResponse;
resultsAreFound = true;
constructor(private requestService: RequestService) { }
public dataTable: DataTable;
ngOnInit() {
this.dataTable = {headerRow : null, footerRow: null, dataRows: null };
this.requestService.currentSearchResult.subscribe(result => {
this.requestResponse = result;
if (result.length > 0) {
this.resultsAreFound = true;
// If new results are obtained, update the datatable with the fresh data.
this.dataTable.headerRow = Object.keys(this.requestResponse[0]);
this.dataTable.footerRow = Object.keys(this.requestResponse[0]);
this.dataTable.dataRows = this.requestResponse.map(function(i: { [s: string]: {}; } | ArrayLike<{}>) {
return Object.values(i);
});
} else {
// In case of empty results, hide the datatable and display a "0 results" message.
this.resultsAreFound = false;
}
});
}
ngAfterViewInit() {
$('#datatable').DataTable({
'pagingType': 'full_numbers',
'lengthMenu': [
[10, 25, 50, -1],
[10, 25, 50, 'All']
],
responsive: true,
language: {
search: '_INPUT_',
searchPlaceholder: 'Search records',
}
});
The template for the request-result-component:
<div class="main-content" style="margin-top: 50px;">
<div class="row">
<div class="col-md-12">
<div class="card">
<div [hidden]="resultsAreFound" class="card-header">
<h4 class="card-title">0 Results Found.</h4>
</div>
<div [hidden]="!resultsAreFound" class="card-body">
<div class="toolbar">
</div>
<table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>{{ dataTable.headerRow[0] }}</th>
<th>{{ dataTable.headerRow[1] }}</th>
<th>{{ dataTable.headerRow[2] }}</th>
<th>{{ dataTable.headerRow[3] }}</th>
<th>{{ dataTable.headerRow[4] }}</th>
<th class="disabled-sorting text-right">{{ dataTable.headerRow[5] }}</th>
</tr>
</thead>
<tfoot>
<tr>
<th>{{ dataTable.footerRow[0] }}</th>
<th>{{ dataTable.footerRow[1] }}</th>
<th>{{ dataTable.footerRow[2] }}</th>
<th>{{ dataTable.footerRow[3] }}</th>
<th>{{ dataTable.footerRow[4] }}</th>
<th>{{ dataTable.footerRow[5] }}</th>
</tr>
</tfoot>
<tbody>
<tr *ngFor="let row of dataTable.dataRows">
<td>{{row[0]}}</td>
<td>{{row[1]}}</td>
<td>{{row[2]}}</td>
<td>{{row[3]}}</td>
<td>{{row[4]}}</td>
<td class="text-right">
<a href="#" class="btn btn-danger btn-link btn-icon btn-sm remove"><i class="fa fa-times"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end content-->
</div>
<!-- end card -->
</div>
<!-- end col-md-12 -->
</div>
<!-- end row -->
</div>