如何基于Angular中某一列的值(时间戳)对表格进行排序

huangapple go评论135阅读模式
英文:

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

如何基于Angular中某一列的值(时间戳)对表格进行排序

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

如何基于Angular中某一列的值(时间戳)对表格进行排序

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) =&gt; {
    const dateA = a.issueDate.getTime();
    const dateB = b.issueDate.getTime();
    return dateA &lt; dateB ? 1 : dataA &gt; 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[])=&gt;{
          return res.sort((a: any, b: any) =&gt; {
             const dateA = a.issueDate.getTime();
             const dateB = b.issueDate.getTime();
             return dateA &lt; dateB ? 1 : dataA &gt; dateB ? -1 : 0
          })
    }))
}

If you choose sort in the component

ngOnInit()
{
     this.dataService.getData().subscribe((res:any[])=&gt;{
          this.inspections=res.sort((a: any, b: any) =&gt; {
             const dateA = a.issueDate.getTime();
             const dateB = b.issueDate.getTime();
             return dateA &lt; dateB ? 1 : dataA &gt; dateB ? -1 : 0
          })
}

You can also create a function sortData

sortData(data:any[]){
    return data.sort((a: any, b: any) =&gt; {
             const dateA = a.issueDate.getTime();
             const dateB = b.issueDate.getTime();
             return dateA &lt; dateB ? 1 : dataA &gt; dateB ? -1 : 0
         })
}
//and use in &quot;anywhere&quot;
this.inspections=this.sortData(this.inspections)

huangapple
  • 本文由 发表于 2023年3月7日 15:43:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/75659172.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定