自定义排序在PrimeNG DataTable中不起作用?

时间:2017-11-06 19:49:45

标签: angular primeng primeng-datatable

我有一个名为Number的列,其值为number。我正在尝试在此列上实现自定义排序,因为默认排序不适用于此列,但它甚至没有调用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;
});
}

0 个答案:

没有答案