I have a paginated array and I have to sort by columns but when I sort from the current page I get the begenning or the end of the sorted array but if I change the page I get the right sorted values. It seems the current page becomes the 1st page when I trigger the function.
I use the pagination from ng-bootstrap
Function triggered when I click on a column
sort() {
if (this.sortAsc == false) {
this.service.getSortedData().subscribe((data) => {
this.array = data['data'];
this.nextPage = data['next_page_url'];
this.collectionSize = data['total'];
});
} else {
this.service.getSortedDataDesc().subscribe((data) => {
this.array = data['data'];
this.nextPage = data['next_page_url'];
this.collectionSize = data['total'];
});
}
}
HTML
<th scope="col" (click)="sort()">
<fa-icon *ngIf="sortAsc == true" [icon]="faChevronUp"></fa-icon>
<fa-icon *ngIf="sortAsc == false" [icon]="faChevronDown"></fa-icon>
Values
</th>
current result with order by desc example:
on click column from page 2 :
1000
150
20
navigate to sorted page 1 :
1000
150
20
expected result :
on click column from page 2 :
10
6
5
navigate to sorted page 1 :
1000
150
20
data content for page 2:
{
current_page: 1
data: (30) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
first_page_url: "http://localhost:8000/api/values?page=1"
from: 1
last_page: 4
last_page_url: "http://localhost:8000/api/values?page=4"
links: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
next_page_url: "http://localhost:8000/api/values?page=2"
path: "http://localhost:8000/api/values"
per_page: 30
prev_page_url: null
to: 30
total: 118
}