问题的原因是当Grid重新绑定数据时,分页器会自动重置为第一页。解决此问题的一种方法是在Grid的每个数据绑定完成后获取当前选定页,然后手动设置Grid到该页。
以下是示例代码:
在component.ts文件中:
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent } from '@progress/kendo-angular-grid';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public view: Observable;
public total: Observable;
public pageSize = 10;
public skip = 0;
private previousSkip = 0;
@ViewChild(GridComponent) public grid: GridComponent;
constructor() {
}
ngOnInit() {
this.loadItems();
}
public pageChange(event: any): void {
this.skip = event.skip;
this.loadItems();
}
private loadItems(): void {
// Load data from server
this.view = this.getServiceData().pipe(map(data => data.slice(this.skip, this.skip + this.pageSize)));
this.total = this.getServiceData().pipe(map(data => data.length));
this.view.subscribe(() => {
// After data is loaded, set Grid to previous selected page
if (this.previousSkip > 0) {
this.grid.dataState.skip = this.previousSkip;
this.grid.pageChange.emit({ skip: this.previousSkip, take: this.pageSize });
}
});
}
private getServiceData(): Observable {
// Replace with actual service call to fetch data from server
return new Observable(observer => {
setTimeout(() => {
const data = [];
for (let i = 0; i < 100; i++) {
data.push({ Id: i + 1, Name: `Item ${i + 1}` });
}
observer.next(data);
}, 1000);
});
}
}
在component.html文件中:
{{ 'Pager pageSizes' | translate }} {{'Pager itemsPerPage' | translate}} {{'