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
}
Although you havent provide the cruicial information, I'm guessing that probably the problem is in the getSortedData() and getSortedDataDesc() functions, what are they returning? You need to offset the data, somehow read current page and subtract those pages from the result passed to
this.array = data['data'];
also, you set the array in the first condition and you're not doing that in the second, maybe that's the problem?
this is because you're subscribing the value changes on a click event. try this instead:
async sort() {
let data = [];
if (this.sortAsc == false) {
data = await this.service.getSortedData().toPromise();
} else {
data = await this.service.getSortedDataDesc().toPromise();
}
this.array = data['data'];
this.firstPageUrl = data['first_page_url'];
this.nextPage = data['next_page_url'];
this.collectionSize = data['total'];
}
I found a solution, I don't think this is really clean but it works. I store the current page when I display another page then add a condition in the sort() function
sort(){
if (this.sortAsc == false) {
this.service.getSortedData().subscribe((data) => {
this.nextPage = data['next_page_url'];
this.collectionSize = data['total'];
if (this.currentPage == 1) {
this.array = data['data'];
} else {
this.service
.getPage(this.firstPageUrl, this.currentPage)
.subscribe((data) => {
this.array = data['data'];
});
}
});
} else {
this.service.getSortedDataDesc().subscribe((data) => {
this.nextPage = data['next_page_url'];
this.collectionSize = data['total'];
if (this.currentPage == 1) {
this.array = data['data'];
} else {
this.service
.getPage(this.firstPageUrl, this.currentPage)
.subscribe((data) => {
this.array = data['data'];
});
}
});
}
}