从后端分页的ng2-smart-table(春季) [英] 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服务上，它使用的API调用是?page = 1& size = 100"作为初始调用，而在客户端大小的寻呼机上，它显示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解决了这个问题.

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(春季)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！