Я использовал таблицы primeNG для разбивки на страницы, но при попытке реализовать сортировку для каждого поля в строке таблицы.он показывает неровные данные для 1,2,3,4,5,6 до 14. когда я нажимаю на сортировку (в порядке возрастания) его отображение 1,10, 11,12,13,14,2,3,4,5,6,7,8,9.
**.html file**
<p-table [value]="incomingbookings" [columns]="cols" #iwdtable [paginator]="true" [rows]="5" [pageLinks]="1" [(selection)]="selectedIncomingBookings" dataKey="booking_id" [responsive]="true">
<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>
<th>Add to offer</th>
<th>Action</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-incomingbookings >
<tr [pSelectableRow]="rowData">
<td field="offer_id">
<span class="ui-column-title" field="offer_id">Offer Id</span>
{{incomingbookings.offer_id}}
</td>
<td field="booking_id">
<span class="ui-column-title">Bookign Id</span>
{{incomingbookings.booking_id}}
</td>
<td field="ratings" style="padding-right:0px;padding-left:0px;">
<span class="ui-column-title">Shipper</span>
{{incomingbookings.shipper_info[0].name}}
<div>
<!-- <span class="fs10">{{incomingbookings.shipper_info[0].ratings}}</span> -->
<span class="stars-container stars-{{getvalue(incomingbookings.shipper_info[0].ratings)}}">★★★★★</span>
</div>
</td>
<td field="pcs" >
<span class="ui-column-title">Pcs</span>
{{incomingbookings.pcs}}
</td>
<td field="weight">
<span class="ui-column-title">Weight</span>
{{incomingbookings.weight}}
</td>
<td field="volume">
<span class="ui-column-title">Volume</span>
{{incomingbookings.volume}}
</td>
<td field="volume_weight">
<span class="ui-column-title">Volume Weight</span>
{{incomingbookings.volume_weight}}
</td>
<td field="chargeable_weight">
<span class="ui-column-title">Chargeable Weight</span>
{{incomingbookings.chargeable_weight}}
</td>
<td>
<span class="ui-column-title">Add to offer</span>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
<td>
<span class="ui-column-title">Action</span>
<div class="dropdown">
<button class="dropbtn">Action</button>
<div class="dropdown-content">
<a href="#">Accept</a>
<a href="#">Waitlist</a>
<a href="#">Decline</a>
</div>
</div>
</td>
</tr>
</ng-template>
<!--<ng-template pTemplate="summary">
<ul>
<li *ngFor="let car of selectedIncomingBookings" style="text-align: left">
{{car.booking_id}}
</li>
</ul>
</ng-template>-->
</p-table>
.ts file
ngOnInit() {
this.pageName=this.constructor.name;
// this.myInnerHeight=window.screen.height;
this.cols = [
{ field: 'offer_id', header: 'Offer ID' },
{ field: 'booking_id', header: 'Booking ID' },
{ field: 'shipper_info', header: 'Shipper Info' },
{ field: 'pcs', header: 'pcs' },
{ field: 'weight', header: 'Weight' },
{ field: 'volume', header: 'volume' },
{ field: 'volume_weight', header: 'Volume weight' },
{ field: 'chargeable_weight', header: 'Chargeable Weight' },
];
this.incomingbookings=[{"offer_id":'1',"booking_id":"12345","shipper_info":[{"name":"hemanth","ratings":"4"}],"pcs":"123","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'2',"booking_id":"123455","shipper_info":[{"name":"hemanth","ratings":"3.5"}],"pcs":"1","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'3',"booking_id":"12345g","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"2","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'4',"booking_id":"12345o","shipper_info":[{"name":"hemanth","ratings":"5"}],"pcs":"3","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'5',"booking_id":"12345gk","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"4","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'6',"booking_id":"12345gn","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"5","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'7',"booking_id":"12345i","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"7","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'8',"booking_id":"12345u","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"9","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'9',"booking_id":"12345t","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"10","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'10',"booking_id":"12345x","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"34","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'11',"booking_id":"12345b","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"14","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'12',"booking_id":"12345b","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"14","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'13',"booking_id":"12345b","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"14","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""},
{"offer_id":'14',"booking_id":"12345b","shipper_info":[{"name":"hemanth","ratings":"1.5"}],"pcs":"14","weight":"123","volume":"123","volume_weight":"123","chargeable_weight":""}]
Обычные таблицы (перед сортировкой)
исходная таблица при отображении данных (страница1 из 3).
исходная таблица при отображении данных (стр. 2 из 3).
исходная таблица при отображении данных (стр. 3 из 3).
После сортировки: идентификаторы предложений идут не в порядке возрастания.10,11,12,13,14 идут после 1
после нажатия кнопки сортировки
сортировка 1-го поля ИД предложения в таблице (страница 1 из 3).
сортировка 1-го поля ID предложения в таблице (стр. 2 из 3).
сортировка 1-го поля ID предложения в таблице (стр. 3 из 3).