问题描述
我在我的项目中使用了 ngx-datatable 并实现了服务器端排序和分页。我已经在任何地方实现了这个逻辑，它的工作完全正常。但我只在一个组件中面临问题。我有一张桌子，每条记录都有一个查看按钮
当我点击视图按钮时，它会打开一个模式，它将在表格中显示随机的 json 数据。我不知道列，所以我在下面的代码中动态获取列
component.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;
}
}
}
component.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">×</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 天我一直在努力解决它。请如果有人可以提供帮助，将不胜感激。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）