Tengo una matriz paginada y tengo que ordenar por columnas, pero cuando ordeno desde la página actual, obtengo el principio o el final de la matriz ordenada, pero si cambio la página, obtengo los valores ordenados correctos. Parece que la página actual se convierte en la primera página cuando activo la función.
Uso la paginación deng-bootstrap
Función activada cuando hago clic en una columna
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>resultado actual con order by desc ejemplo:
en la columna de clic de la página 2:
1000 150 20navegar a la página ordenada 1:
1000 150 20Resultado Esperado :
en la columna de clic de la página 2:
10 6 5navegar a la página ordenada 1:
1000 150 20contenido de datos para la página 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 }Aunque no ha proporcionado la información crucial, supongo que probablemente el problema esté en las getSortedData() y getSortedDataDesc() , ¿qué están devolviendo? Debe compensar los datos, leer de alguna manera la página actual y restar esas páginas del resultado pasado a
this.array = datos['datos'];
Además, establece la matriz en la primera condición y no está haciendo eso en la segunda, ¿tal vez ese sea el problema?
esto se debe a que está suscribiendo los cambios de valor en un evento de clic. prueba esto en su lugar:
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']; }Encontré una solución, no creo que esto sea realmente limpio, pero funciona. Guardo la página actual cuando muestro otra página y luego agrego una condición en la función sort()
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']; }); } }); } }