Sort a paginated array

Question

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
}

Answer 1

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?

Answer 2

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'];
  }