ng2-smart-table with paging from back-end (Spring)

Question

I am using a back-end server (Java Spring) that has Pager enabled. I am loading 100 records per page on a HTTP call.

On angular2 service, it is consuming the API ca

Answer 1

I solved this problem with LocalDataSource.

HTML:

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);
      })
  }
}