ng2-smart-table 与后端分页(Spring) [英] ng2-smart-table with paging from back-end (Spring)
问题描述
我正在使用启用了 Pager 的后端服务器 (Java Spring).我在 HTTP 调用中每页加载 100 条记录.
I am using a back-end server (Java Spring) that has Pager enabled. I am loading 100 records per page on a HTTP call.
在 angular2 服务上,它使用?page=1&size=100"作为初始调用使用 API 调用,而在客户端大小的寻呼机上,它显示 10 并移动到 10 页,这很好.但是我无法从服务器加载下一块数据.我检查了 ServerDataSource 并使用了 .setPaging(1,100).
On angular2 service, it is consuming the API call with "?page=1&size=100" as the initial call whereas on the client size pager, it shows 10 and moves up to 10 page which is fine. But I am unable to load the next chunk of data from server. I have checked ServerDataSource and used .setPaging(1,100).
如何加载下一个数据块 (2-200) 以及如何实现这一点.任何提示都会有所帮助.
How can I load the next chunk of data (2-200) and how can I achieve this. Any hints will be helpful.
@Injectable()
export class AmazonService extends ServerDataSource {
constructor(protected http: Http) {
super(http);
}
public getAmazonInformation(page, size): Observable<Amazon[]> {
let url = 'http://localhost:8080/plg-amazon?page=1&size=100';
this.setPaging(1, 100, true);
if (this.pagingConf && this.pagingConf['page'] &&
this.pagingConf['perPage']) {
url +=
`page=${this.pagingConf['page']}&size=${this.pagingConf['perPage']}`;
}
return this.http.get(url).map(this.extractData).catch(this.handleError);
}
谢谢!
推荐答案
我用 LocalDataSource
解决了这个问题.
I solved this problem with LocalDataSource
.
HTML:
<ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>
TS:
source: LocalDataSource = new LocalDataSource();
pageSize = 25;
ngOnInit() {
this.source.onChanged().subscribe((change) => {
if (change.action === 'page') {
this.pageChange(change.paging.page);
}
});
}
pageChange(pageIndex) {
const loadedRecordCount = this.source.count();
const lastRequestedRecordIndex = pageIndex * this.pageSize;
if (loadedRecordCount <= lastRequestedRecordIndex) {
let myFilter; //This is your filter.
myFilter.startIndex = loadedRecordCount + 1;
myFilter.recordCount = this.pageSize + 100; //extra 100 records improves UX.
this.myService.getData(myFilter) //.toPromise()
.then(data => {
if (this.source.count() > 0){
data.forEach(d => this.source.add(d));
this.source.getAll()
.then(d => this.source.load(d))
}
else
this.source.load(data);
})
}
}
这篇关于ng2-smart-table 与后端分页(Spring)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!