服务器端排序结果在 Ngx-datatable 中以错误的顺序显示

Question

我在我的项目中使用了 ngx-datatable 并实现了服务器端排序和分页。 我已经在任何地方实现了这个逻辑并且它工作得很好。 但我只面临一个组件的问题。 我有一张桌子，每条记录都有一个查看按钮

当我单击查看按钮时，它将打开一个模式，它将在表格中显示随机的 json 数据。 我不知道列，所以我在下面的代码中动态获取列

组件.ts 文件

showFile(row) {
    this.viewModal.show();
    this.selectedFileName = { ...row };
    this.sortPaginationFile = new SortPagination();
    this.formattedFileHeaders = [];
    this.fileData = [];
    this.getFileData(this.sortPaginationFile);
  }

  getFileData(sortPaginationFile: SortPagination) {
    const filter = new DataCatalogueFileFilter(
      this.selectedFileName.tableName,
      this.selectedFileName.tableFilter
    );

    this.dataCatalogueService
      .getDataCatalogueFile(filter, sortPaginationFile)
      .subscribe((res: any) => {
        const makeString = `{"fileData": ${res.data}}`;
        const stringDaTA = JSON.parse(makeString);
        this.fileData = [];
        stringDaTA.fileData.map((element) => {
          this.fileData.push(element);
        });
        console.log(this.fileData);
        this.fileTotalRecords = res.totalNumberOfRecords;
        if (this.fileTotalRecords > 0) {
          this.formattedFileHeaders = [
            ...Object.keys(this.fileData[0]).map((key) => {
              return { headerkey: key, formattedKey: this.capitalizeKey(key) };
            }),
          ];
        }
      });
  }

  capitalizeKey(key: string) {
    key = key.replace(/_/g, " ");
    const splitKey = key.split(" ");
    const newKey = splitKey.map((element) => {
      return element.charAt(0).toUpperCase() + element.slice(1);
    });
    return newKey.join(" ");
  }

  checkIfNumber(value) {
    if (value && isNaN(value)) {
      return value;
    } else {
      if (value % 1 !== 0) {
        return this.decimalPipe.transform(value, "1.3-3");
      } else {
        return value;
      }
    }
  }

组件.html文件

<div
  bsModal
  #viewModal="bs-modal"
  class="modal fade siteModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">View File</h4>
        <button
          type="button"
          class="close"
          (click)="viewModal.hide()"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Site Informationb Form -->
        <div class="card card-form">
          <div
            class="card card-accent-primary card-search-results"
            *ngIf="fileData && fileData.length > 0"
          >
            <div class="pagination-title-wraper">
              <div class="pagination-holder" *ngIf="fileTotalRecords > 0">
                <strong>Showing</strong> <span>{{ calculatePageFile() }}</span>
              </div>
            </div>
            <div class="card-body">
              <ngx-datatable
                *ngIf="fileTotalRecords > 0"
                #fileTable
                class="material"
                [rows]="fileData"
                [columnMode]="'force'"
                [virtualization]="false"
                [headerHeight]="60"
                [scrollbarH]="true"
                [footerHeight]="50"
                [count]="fileTotalRecords"
                [offset]="sortPaginationFile.pageNumber - 1"
                [limit]="sortPaginationFile.pageSize"
                [externalPaging]="true"
                [externalSorting]="true"
                (page)="setPageFile($event)"
                (sort)="onSortFile($event)"
              >
                <ngx-datatable-column
                  *ngFor="let header of formattedFileHeaders"
                  [width]="190"
                  [name]="header.formattedKey"
                  [prop]="header.headerkey"
                  [sortable]="true"
                >
                  <ng-template
                    let-row="row"
                    let-rowIndex="rowIndex"
                    ngx-datatable-cell-template
                  >
                    {{ checkIfNumber(row[header.headerkey]) }}
                  </ng-template>
                </ngx-datatable-column>
                <ngx-datatable-footer>
                  <ng-template
                    ngx-datatable-footer-template
                    let-rowCount="rowCount"
                    let-pageSize="pageSize"
                    let-selectedCount="selectedCount"
                    let-curPage="curPage"
                    let-offset="offset"
                  >
                    <div class="pagination-showing">
                      <span>Show</span>
                      <div class="select-wrapper">
                        <select
                          class="form-control"
                          [(ngModel)]="sortPaginationFile.pageSize"
                          (change)="changeFilePageSize($event.target.value)"
                        >
                          <option value="5">5</option>
                          <option value="10">10</option>
                          <option value="20">20</option>
                          <option value="50">50</option>
                          <option value="100">100</option>
                        </select>
                      </div>
                      <span>Per Page</span>
                    </div>

                    <datatable-pager
                      [pagerLeftArrowIcon]="'datatable-icon-left'"
                      [pagerRightArrowIcon]="'datatable-icon-right'"
                      [pagerPreviousIcon]="'datatable-icon-prev'"
                      [pagerNextIcon]="'datatable-icon-skip'"
                      [page]="curPage"
                      [size]="pageSize"
                      [count]="rowCount"
                      [hidden]="!(rowCount / pageSize > 1)"
                      (change)="fileTable.onFooterPage($event)"
                    >
                    </datatable-pager>
                  </ng-template>
                </ngx-datatable-footer>
              </ngx-datatable>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-transparent btn-rounded"
          (click)="viewModal.hide()"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</div>

现在我面临的问题是，当我单击结束日期列进行如下降序排序时，它的排序非常好，直到我到达第 7 页

尽管我从 db 获得了正确的结果，并且在解析后将确切的结果存储在this.fileData中，这些是我得到的正确日期顺序，但不知何故，结果并没有像表中那样显示。

我不知道问题是什么，我已经尝试了过去 3 天来解决它。 请如果有人可以提供帮助，将不胜感激。

Answer 1

尝试在onSortFile() function 中添加这个：

this.fileTable.bodyComponent.updateOffsetY(this.sortPaginationFile.pageNumber - 1);
this.fileTable.offset =  this.sortPaginationFile.pageNumber - 1;