英文:
How to sort the table based on the values (time stamp ) of a column in angular
问题
I want to sort the rows of the table based on the time stamp
the above image shown that same code i want to sort according to date and time same like that i want to see latest query on top in the table row
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr id="table-heading" class="heading">
<td><small>No.</small></td>
<td><small>Date Of Inspection</small></td>
<td style="width: 15%;"><small>Transaction ID</small></td>
<td><small>Plate No.</small></td>
<td style="width: 7%;"><small>Lic No.</small></td>
<td><small>Establishment Name</small></td>
<td><small>Type of Vehicle</small></td>
<!-- <td><small>Chassis Number</small></td>
<td><small>Manufacturer</small></td> -->
<td><small>Issue Date</small></td>
<td><small>Expiry Date</small></td>
<td><small>View Permit</small></td>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of inspections; let i=index">
<td><small>{{((currentPage - 1) * itemsPerPage) + (i+1)}}</small></td>
<td><small>{{item.vehicleInformationForm.issueDate | date:'d-MMM-y'}}</small></td>
<td><small>{{item.readingForm.tawasulRecieptNum}}-{{item.id}}</small></td>
<td><small>{{item.vehicleInformationForm.registrationNumber}}</small></td>
<td><small>{{item.entityInformationForm.tradeLicenseNumber}}</small></td>
<td><small>{{item.entityInformationForm.companyName}}</small></td>
<td><small>{{ (item.vehicleInformationForm.vehicleCategory==='1')?'Chiller' :
(item.vehicleInformationForm.vehicleCategory==='2')?'Freezer':
(item.vehicleInformationForm.vehicleCategory==='3')?'Freezer & Chiller':
(item.vehicleInformationForm.vehicleCategory==='4')?'Dry':
(item.vehicleInformationForm.vehicleCategory==='5')?'Chiller & Dry':
(item.vehicleInformationForm.vehicleCategory==='6')?'Freezer & Dry':
(item.vehicleInformationForm.vehicleCategory==='7')?'Hot Food in Thermo Box':
(item.vehicleInformationForm.vehicleCategory==='8')?'Insulated Box':
''
}}</small></td>
<!-- <td><small>{{item.vehicleInformationForm.chassisNumber}}</small></td>
<td><small>{{item.vehicleInformationForm.manufacturer}}</small></td> -->
<td><small>{{item.vehicleInformationForm.issueDate | date:'d-MMM-y'}}</small></td>
<td><small>{{item.vehicleInformationForm.expireDate | date:'d-MMM-y'}}</small></td>
<!-- <td><small><img src="../../../../../assets/images/detail.png" width="30"></small></td> -->
<td><small><img src="../../../../../assets/images/view-report.png" width="30" style="cursor:pointer;" (click)="print(item)"></small></td>
</tr>
</tbody>
</table>
</div>
英文:
I want to sort the rows of the table based on the time stamp
the above image shown that same code i want to sort according to date and time same like that i want to see latest query on top in the table row
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr id="table-heading" class="heading">
<td><small>No.</small></td>
<td><small>Date Of Inspection</small></td>
<td style="width: 15%;"><small>Transaction ID</small></td>
<td><small>Plate No.</small></td>
<td style="width: 7%;"><small>Lic No.</small></td>
<td><small>Establishment Name</small></td>
<td><small>Type of Vehicle</small></td>
<!-- <td><small>Chassis Number</small></td>
<td><small>Manufacturer</small></td> -->
<td><small>Issue Date</small></td>
<td><small>Expiry Date</small></td>
<td><small>View Permit</small></td>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of inspections; let i=index">
<td><small>{{((currentPage - 1) * itemsPerPage) + (i+1)}}</small></td>
<td><small>{{item.vehicleInformationForm.issueDate | date:'d-MMM-y'}}</small></td>
<td><small>{{item.readingForm.tawasulRecieptNum}}-{{item.id}}</small></td>
<td><small>{{item.vehicleInformationForm.registrationNumber}}</small></td>
<td><small>{{item.entityInformationForm.tradeLicenseNumber}}</small></td>
<td><small>{{item.entityInformationForm.companyName}}</small></td>
<td><small>{{ (item.vehicleInformationForm.vehicleCategory==='1')?'Chiller' :
(item.vehicleInformationForm.vehicleCategory==='2')?'Freezer':
(item.vehicleInformationForm.vehicleCategory==='3')?'Freezer & Chiller':
(item.vehicleInformationForm.vehicleCategory==='4')?'Dry':
(item.vehicleInformationForm.vehicleCategory==='5')?'Chiller & Dry':
(item.vehicleInformationForm.vehicleCategory==='6')?'Freezer & Dry':
(item.vehicleInformationForm.vehicleCategory==='7')?'Hot Food in Thermo Box':
(item.vehicleInformationForm.vehicleCategory==='8')?'Insulated Box':
''
}}</small></td>
<!-- <td><small>{{item.vehicleInformationForm.chassisNumber}}</small></td>
<td><small>{{item.vehicleInformationForm.manufacturer}}</small></td> -->
<td><small>{{item.vehicleInformationForm.issueDate | date:'d-MMM-y'}}</small></td>
<td><small>{{item.vehicleInformationForm.expireDate | date:'d-MMM-y'}}</small></td>
<!-- <td><small><img src="../../../../../assets/images/detail.png" width="30"></small></td> -->
<td><small><img src="../../../../../assets/images/view-report.png" width="30" style="cursor:pointer;" (click)="print(item)"></small></td>
</tr>
</tbody>
</table>
</div>
答案1
得分: 1
Sort a table is only sort the array
this.inspections = this.inspections.sort((a: any, b: any) => {
const dateA = a.issueDate.getTime();
const dateB = b.issueDate.getTime();
return dateA < dateB ? 1 : dateA > dateB ? -1 : 0;
})
Update where we put the code?
I imagine you receive your data from a service (you subscribe to the data in your component). Is in the service (using pipe map) or in the component when received the data.
If you use the service:
getData() {
this.httpClient.get(...).pipe(
map((res: any[]) => {
return res.sort((a: any, b: any) => {
const dateA = a.issueDate.getTime();
const dateB = b.issueDate.getTime();
return dateA < dateB ? 1 : dateA > dateB ? -1 : 0;
})
}))
}
If you choose to sort in the component:
ngOnInit() {
this.dataService.getData().subscribe((res: any[]) => {
this.inspections = res.sort((a: any, b: any) => {
const dateA = a.issueDate.getTime();
const dateB = b.issueDate.getTime();
return dateA < dateB ? 1 : dateA > dateB ? -1 : 0;
})
}
}
You can also create a function sortData
:
sortData(data: any[]) {
return data.sort((a: any, b: any) => {
const dateA = a.issueDate.getTime();
const dateB = b.issueDate.getTime();
return dateA < dateB ? 1 : dateA > dateB ? -1 : 0;
})
}
// and use it "anywhere"
this.inspections = this.sortData(this.inspections)
英文:
Sort a table is only sort the array
this.inspections = this.inspections.sort((a: any, b: any) => {
const dateA = a.issueDate.getTime();
const dateB = b.issueDate.getTime();
return dateA < dateB ? 1 : dataA > dateB ? -1 : 0
})
Update where we put the code?
I imagine you receive your data from a service (you subscribe to the data in your component). Is in the service (using pipe map) or in the component when received the data
If you use the service:
getData()
{
this.httpClient.get(...).pipe(
map((res:any[])=>{
return res.sort((a: any, b: any) => {
const dateA = a.issueDate.getTime();
const dateB = b.issueDate.getTime();
return dateA < dateB ? 1 : dataA > dateB ? -1 : 0
})
}))
}
If you choose sort in the component
ngOnInit()
{
this.dataService.getData().subscribe((res:any[])=>{
this.inspections=res.sort((a: any, b: any) => {
const dateA = a.issueDate.getTime();
const dateB = b.issueDate.getTime();
return dateA < dateB ? 1 : dataA > dateB ? -1 : 0
})
}
You can also create a function sortData
sortData(data:any[]){
return data.sort((a: any, b: any) => {
const dateA = a.issueDate.getTime();
const dateB = b.issueDate.getTime();
return dateA < dateB ? 1 : dataA > dateB ? -1 : 0
})
}
//and use in "anywhere"
this.inspections=this.sortData(this.inspections)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论