服務器端排序結果在 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;