I have a column named as Number, which has number
values. I'm trying to implement custom sorting on this column because default sorting is not working on this column, but it's not even calling my method as mentioned on the link.
HTML:
<div class="primeng-datatable-container text-center">
<p-dataTable #dataTable (onLazyLoad)="searchTest($event)" [value]="primengDatatableHelper.records" rows="{{primengDatatableHelper.defaultRecordsCountPerPage}}"
[paginator]="false" [lazy]="true" emptyMessage="{{l('NoResultsFound')}}" ScrollWidth="100%" responsive="primengDatatableHelper.isResponsive"
resizableColumns="primengDatatableHelper.resizableColumns">
<p-column field="TestHQId" header="{{l('TestNumber')}}" sortable="custom" (sortFunction)="mysort($event)" [style]="{'width':'30%', 'text-align':'left'}"></p-column>
<p-column *ngIf="isVisible==false" field="TestName" [style]="{'width':'40%', 'text-align':'left'}" header="{{l('TestName')}}" [sortable]="true">
<ng-template let-Test="rowData" pTemplate="body">
<a (click)="selectTest(Test)">{{Test.TestName}}</a>
</ng-template>
</p-column>
<p-column *ngIf="isVisible==true" field="TestName" header="{{l('TestName')}}" [sortable]="true" [style]="{'width':'40%', 'text-align':'left'}"></p-column>
<p-column *ngIf="isVisible==true" field="" header="{{l('Actions')}}" [sortable]="false" [style]="{'width':'10%'}">
<ng-template let-record="rowData" pTemplate="body">
<div class="clear-fix">
<button class="btn btn-xs btn-primary" (click)="onEditClick(record)"> <i class="fa fa-edit"></i></button>
<button class="btn btn-xs btn-danger" (click)="onDeleteClick(record, $event)"><i class="fa fa-trash-o"></i></button>
</div>
</ng-template>
</p-column>
</p-dataTable>
<div class="primeng-paging-container">
<p-paginator rows="{{primengDatatableHelper.defaultRecordsCountPerPage}}" #paginator (onPageChange)="searchTest($event)"
[totalRecords]="primengDatatableHelper.totalRecordsCount" [rowsPerPageOptions]="primengDatatableHelper.predefinedRecordsCountPerPage">
</p-paginator>
<span class="total-records-count">
{{l('TotalRecordsCount', primengDatatableHelper.totalRecordsCount)}}
</span>
</div>
TS:
mysort(event) {
console.log(event);
let comparer = function (a, b): number {
let result: number = -1;
if (a > b) result = 1;
return result * event.order;
};
this.primengDatatableHelper.records.sort(comparer);
//event.field = Field to sort
//event.order = Sort order
}
searchTest(event?: LazyLoadEvent): void {
this.primengDatatableHelper.showLoadingIndicator();
this._TestService.getSearchTests(this.TestNumber,this.TestName,
this.primengDatatableHelper.getSorting(this.dataTable),
this.primengDatatableHelper.getMaxResultCount(this.paginator, event),
this.primengDatatableHelper.getSkipCount(this.paginator, event)
).subscribe((result) => {
this.primengDatatableHelper.totalRecordsCount = result.totalCount;
this.primengDatatableHelper.records = result.items;
this.primengDatatableHelper.hideLoadingIndicator();
this.TestList = result.items;
});
}