• 1000 не уверен, что я делаю здесь неправильно: -
Разбивка на страницы работает нормально, только когда я применяю модель сортировки.
Это метод в моем классе компонентов angular для создания источник данных. Я объединяю свои другие параметры с параметром aggrid params.request для вызова API: -
createDatasource(data: ActiveFiltersWithParams): Observable<IServerSideDatasource> {
const dataSource: IServerSideDatasource = {
// called by the grid when more rows are required
getRows: (params: IServerSideGetRowsParams) => {
data.startRow = params.request.startRow + 1;
data.endRow = params.request.endRow;
data.sortModel = params.request.sortModel;
var response = this.getGridData(data);
response
.pipe(takeUntil(this.unsubscribe$))
.subscribe(data => {
const immutableData: FundDetail = JSON.parse(JSON.stringify(data));
setTimeout(() => {
let lastRow = -1;
if (immutableData.totalRows <= params.request.endRow) {
lastRow = immutableData.totalRows;
}
if (immutableData.rows.length === 0) {
this.gridOptions.api.showNoRowsOverlay()
}
params.successCallback(immutableData.rows, lastRow);
}), 500
}, (err) => {
params.failCallback();
this.toastrService.error(err);
});
}
};
if (this.gridApi)
this.gridApi.setServerSideDatasource(dataSource);
return Observable.of(dataSource);
}
здесь я вызываю свою функцию createDataSouce: -
this.etpScreenerService.activeFiltersForGridObs$
.pipe(switchMap((data) => {
if (data && Object.keys(data).length) {
if (this.gridOptions && this.gridOptions.api)
this.gridOptions.api.hideOverlay();
return this.createDatasource(data);
} else {
return Observable.empty();
}
}), takeUntil(this.unsubscribe$))
.subscribe((data) => {
}, err => {
this.toastrService.error(err);
});
это Объект GridOptions: -
gridOptions: GridOptions = {
// pagination: true,
rowModelType: 'serverSide',
cacheBlockSize: 20,
columnDefs: this.createColumnDefs(),
components: {
loadingCellRenderer: (params: any) => {
if (params.value !== undefined) {
return params.value;
} else {
return `<i class="fa fa-spinner fa-pulse fa-fw"></i><span>Loading...</span>`;
}
}
},
};
И в моем шаблоне я использую несколько таких параметров: -
<ag-grid-angular style="height: calc(100vh - 160px);" class="ag-theme-balham" [animateRows]="true"
[enableServerSideSorting]="true" [overlayLoadingTemplate]="overlayLoadingTemplate" [overlayNoRowsTemplate]="overlayNoRowsTemplate" [enableColResize]="true" [gridOptions]="gridOptions"
(gridReady)="onGridReady($event)"></ag-grid-angular>