对分页数组进行排序

Question

我有一个分页数组，我必须按列排序，但是当我从当前页面排序时，我得到排序数组的开头或结尾，但如果我更改页面，我得到正确的排序值。当我触发该功能时，当前页面似乎变成了第一页。

的分页

单击列时触发的函数

 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>

当前结果按 desc 排序示例：

点击第 2 页的列：

1000
150
20

导航到已排序的第 1 页：

1000
150
20

预期结果：

点击第 2 页的列：

10
6
5

导航到已排序的第 1 页：

1000
150
20

第 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

虽然您没有提供关键信息，但我猜测问题可能出在 getSortedData() 和 getSortedDataDesc() 函数中，它们返回了什么？您需要偏移数据，以某种方式读取当前页面并从传递给

的结果中减去这些页面

this.array = 数据['data'];

此外，您在第一个条件中设置了数组，而在第二个条件中没有这样做，也许这就是问题所在？

Answer 2

这是因为您订阅了点击事件的值变化。试试这个：

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

Answer 3

我找到了一个解决方案，我认为这不是很干净，但它确实有效。我在显示另一个页面时存储当前页面，然后在 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'];
                });
            }
          });
        }

}

对分页数组进行排序

Sort a paginated array

javascript

angular

sorting

ng-bootstrap