ng2-smart-table с подкачкой из back-end (Spring)

Решил эту проблему с 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 #grid [settings]="settings" ... >

И в вашем компоненте определите настройки, примерно так:

  public settings: TableSettings = new TableSettings();

  ngOnInit(): void {
      ...
    this.settings.pager.display = true;
    this.settings.pager.perPage = 100;
    ...
  }

Также, если вам нужно настроить запрос на бэкэнд, есть параметры конфигурации для ServerDataSource, который используется для получения / разбивки на страницы / сортировки данных.

Когда у вас есть конечная точка для некоторого объекта в {endPointBase} / ng2-smart-table, где вы обрабатываете параметры запроса key_like (например: @Requestparam Сопоставление с данными Spring Пример ), вы можете использовать на стороне клиента:

export class SpringDataSource extends ServerDataSource {
    constructor(http: HttpClient, endPointBase: string) {
        const serverSourceConf = new ServerSourceConf();
        serverSourceConf.dataKey = 'content';
        serverSourceConf.endPoint = endPointBase + `/ng2-smart-table`;
        serverSourceConf.pagerLimitKey = 'size';
        serverSourceConf.pagerPageKey = 'page';
        serverSourceConf.sortFieldKey = 'sort';
        serverSourceConf.totalKey = 'totalElements';

        super(http, serverSourceConf);
    }

    protected addPagerRequestParams(httpParams: HttpParams): HttpParams {
        const paging = this.getPaging();
        return httpParams
            .set(this.conf.pagerPageKey, (paging.page - 1).toString())
            .set(this.conf.pagerLimitKey, paging.perPage.toString());
    }

    protected addSortRequestParams(httpParams: HttpParams): HttpParams {
        const sort: {field: string, direction: string}[] = this.getSort();

        sort.forEach((column) => {
            httpParams = httpParams.append(this.conf.sortFieldKey, `${column.field},${column.direction}`);
        });
        return httpParams;
    }
}

Это мой способ решения всех этих проблем.

1. Убедитесь, что в Backend (API) включена функция cors, чтобы клиент мог отображать заголовок X-Pagination следующим образом:

app.UseCors(builder => builder.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin().WithExposedHeaders(new string[] { "X-Pagination"}));

2: HTML:

<ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>

3: ОБСЛУЖИВАНИЕ:

getClients(pageNumber: number, pageSize: number): Observable<any> {
            const headers = new HttpHeaders({'Content-Type': 'application/json','Accept': 'application/json' });
            let params = new HttpParams();
            params = params.append('PageNumber',pageNumber.toString());
            params = params.append('PageSize',pageSize.toString());
            return this.http.get<ClientDto[]>(API_URL, {headers: headers, observe: "response" as "body",  responseType: "json", params} );
          }

4: TS:

export class ListClientComponent implements OnInit {

  source: LocalDataSource;
  pageSize = 30;
  currentPage = 1;
  showPerPage = 10;
  totalCount;
  constructor(private service: ClientService,private router: Router) {
    this.initData();
  }

  public settings = {
    mode: 'external', 
    pager:{
      display: true,
      perPage: this.showPerPage,
    },
    actions: {
      add:false,
      edit:true,
      delete:false
    },
        columns: {
      clientId: {
        title: 'CI',
      },
      name: {
        title: 'Name'
      },
      instagramName: {
        title: 'Instagram'
      },
      type: {
        title: 'Type'
      },
      phone: {
        title: 'Phone'
      },
      gender: {
        title: 'Gender'
      },
      age: {
        title: 'Age'
      },
      city: {
        title: 'City'
      },
      email: {
        title: 'Email'
      }
    },
  };

  ngOnInit() {
    this.initOnChagedData();
  }

  onEdit(event){
    console.log(event.data.clientId);
    this.router.navigate(['/clients/update-client/'+ event.data.clientId]) ;  
  }

  initData(){
    this.source = new LocalDataSource();
    this.service.getClients(this.currentPage, this.pageSize).subscribe( (result: HttpResponse<any>) => {
      if(!result){
        return;
      }
      this.source.load(result.body);
      this.totalCount = JSON.parse(result.headers.get("X-Pagination"));
      this.totalCount = this.totalCount["totalCount"];
      console.log(this.source.count());
    }
    )
  }

  initOnChagedData(){
    this.source.onChanged().subscribe((change) => {
      if (change.action === 'page') {
        this.pageChange(change.paging.page);
      }
    });
  }

  pageChange(pageIndex) {
    var getNew = pageIndex * this.showPerPage;
    if( getNew >= this.source.count() && getNew < this.totalCount){
      this.currentPage = this.currentPage + 1;
      this.service.getClients(this.currentPage, this.pageSize).subscribe( result => {
        if(!result){
          return;
        }
        result.body.forEach(element => {
          this.source.add(element);
        });
      })
    }
  }
}

Вы должны заметить, что pageSize = общие данные, которые мы извлекаем из серверной части и отображаем на странице = общие данные, которые мы показываем в таблице.

Алгоритм предназначен для извлечения из API только при необходимости, то есть, когда клиент достигает страницы, где данные заканчиваются в памяти, он запрашивает еще 30 данных, чтобы иметь еще 3 страницы, а также не забывает другие 3 которые уже извлекались раньше.