我正在使用 primeNg
<p-table>排序.HTML
<p-table [columns]="cols" [value]="documents">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-doc>
<tr>
<td>
{{doc.sName}}
</td>
<td>
{{doc.sYear}}
</td>
<td>
{{doc.sAge}}
</td>
<td>
{{doc.sColor}}
</td>
</tr>
</ng-template>
</p-table>
排序.ts
this.cols = [
{ field: 'name', header: 'Name' },
{ field: 'year', header: 'Year' },
{ field: 'age', header: 'Age' },
{ field: 'color', header: 'Color' }
];
ngOnInit(){
//made a service call and got data for
this.documents=[{
"sName":"Jhon",
"sYear":"1994",
"sAge":"20",
"sColor":"Red"
},
{
"sName":"Sam",
"sYear":"1996",
"sAge":"25",
"sColor":"Red"
},
{
"sName":"Anna",
"sYear":"1991",
"sAge":"21",
"sColor":"Green"
},
{
"sName":"Jhon",
"sYear":"1999",
"sAge":"25",
"sColor":"Blue"
},
{
"sName":"Betty",
"sYear":"1993",
"sAge":"35",
"sColor":"Red"
}]
}
目前只有
Name[pSortableColumn]PS：我无法使用
<p-dataTable>要使用带有固定列的 Turbo 表/p 表进行排序，请尝试以下代码
<p-table #dt [value]="data">
<ng-template pTemplate="header">
<tr>
<th [pSortableColumn]="'Name'">Name
<p-sortIcon [field]="'Name'"></p-sortIcon>
</th>
<th [pSortableColumn]="'Age'">Age
<p-sortIcon [field]="'Age'"></p-sortIcon>
</th>
<th [pSortableColumn]="'Height'">Height
<p-sortIcon [field]="'Height'"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-col>
<tr>
<td>{{col.Name}}</td>
<td>{{col.Age}}</td>
<td>{{col.Height}}</td>
</tr>
</ng-template>
</p-table>
如果我的问题是正确的，那么您并不是要求能够同时对多个列进行排序，而是简单地排序是行不通的。 在您的代码中，问题在于您在表标题中指定要排序的以下列字段：
[pSortableColumn]="col.field"
这些字段定义为：
this.cols = [
{ field: 'name', header: 'Name' },
{ field: 'year', header: 'Year' },
{ field: 'age', header: 'Age' },
{ field: 'color', header: 'Color' }
];
但是您的数据以不同的名称到达：
this.documents=[{
"sName":"Jhon",
"sYear":"1994",
"sAge":"20",
"sColor":"Red"
},
[...]
"name" != "sName" 因此您的表无法对数据进行排序。 事实上，我很惊讶你说“名称”列是可排序的。
只需更改定义，代码即可运行。
无论如何，为了允许多列排序，我建议将代码更改为：
<p-table [columns]="cols" [value]="documents" sortMode="multiple">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-doc let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{doc[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
它也更轻，不需要更改 ts 文件，即使您从 Web 服务获取数据，因为从 html 文件的角度来看，您始终传递“文档”对象。
您需要启用多重模式才能使用
sortMode="multiple"<p-table [columns]="cols" [value]="documents" sortMode="multiple">
默认对单列执行排序，为了启用多字段排序，请将 sortMode 属性设置为“multiple”，并在点击另一列时使用metakey。
有关更多信息，请参阅文档 -
TurboTable 还可以
<div class="table-responsive ">
<p-table #turboTable [value]="claims" [rowHover]="true" [paginator]="true" [rows]="20" [showCurrentPageReport]="true" [first]="first"
currentPageReportTemplate="Reclamos de {first} a {last} de {totalRecords} registros" [rowsPerPageOptions]="[10,25,50]">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="id" width="8%">ID <p-sortIcon field="id"></p-sortIcon></th>
<th pSortableColumn="code" width="15%">CODE <p-sortIcon field="code"></p-sortIcon></th>
<th pSortableColumn="customerClaimDate" width="18%">FECHA RECLAMO CLIENTE <p-sortIcon field="customerClaimDate"></p-sortIcon></th>
<th pSortableColumn="claimDate" width="18%">FECHA CREACIÓN RECLAMO <p-sortIcon field="claimDate"></p-sortIcon></th>
<th pSortableColumn="maximumResponseDate" width="15%">FECHA MAX RESPUESTA <p-sortIcon field="maximumResponseDate"></p-sortIcon></th>
<th pSortableColumn="assignedUserName" width="17%">DERIVADO A <p-sortIcon field="assignedUserName" ></p-sortIcon></th>
<th pSortableColumn="state" width="10%">ESTADO <p-sortIcon field="state"></p-sortIcon></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-tblreclamos>
<tr>
<td>
<span>{{ tblreclamos.id }}</span>
</td>
<td>
<span><a [routerLink]="['edicion', tblreclamos.id]">{{ tblreclamos.code }}</a></span>
</td>
<td>
<span>{{ tblreclamos.customerClaimDate }}</span>
</td>
<td>
<span>{{ tblreclamos.claimDate }}</span>
</td>
<td>
<span>{{ tblreclamos.maximumResponseDate }}</span>
</td>
<td>
<span>{{ tblreclamos.assignedUserName }}</span>
</td>
<td>
<span>
<span [class]="'customer-badge'"
*ngIf="tblreclamos.state==53">Borrador</span>
<span [class]="'customer-badge status-warning'"
*ngIf="tblreclamos.state==54">Pendiente</span>
<span [class]="'customer-badge status-success'"
*ngIf="tblreclamos.state== 55">Resuelto</span>
<span [class]="'customer-badge status-danger'"
*ngIf="tblreclamos.state==56">Anulado</span>
</span>
</td>
</tr>
</ng-template>
</p-table>
</div>
customSort(event: SortEvent) {
if (this.isSorted == null || this.isSorted === undefined) {
this.isSorted = true;
this.sortTableData(event);
} else if (this.isSorted == true) {
this.isSorted = false;
this.sortTableData(event);
} else if (this.isSorted == false) {
this.isSorted = null;
this.products = [...this.initialValue];
this.dt.reset();
}
}
sortTableData(event) {
event.data.sort((data1, data2) => {
let value1 = data1[event.field];
let value2 = data2[event.field];
let result = null;
if (value1 == null && value2 != null) result = -1;
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string')
result = value1.localeCompare(value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return event.order * result;
});
}