web-dev-qa-db-ja.com

ng2-バックエンドからのページングを備えたスマートテーブル（春）

Pagerが有効になっているバックエンドサーバー（Java Spring）を使用しています。 HTTP呼び出しでページごとに100レコードをロードしています。

Angle2サービスでは、最初の呼び出しとして「？page = 1＆size = 100」を使用してAPI呼び出しを消費しますが、クライアントサイズのページャーでは、10を表示し、10ページまで移動します。これは問題ありません。しかし、サーバーから次のデータチャンクをロードできません。 ServerDataSourceを確認し、.setPaging（1,100）を使用しました。

データの次のチャンク（2〜200）をロードするにはどうすればよいですか、またこれを実現するにはどうすればよいですか。ヒントがあれば役に立ちます。

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

ありがとうございました！

angularwebpaginationangular2-servicesng2-smart-table
8
Sovan Misra

この問題は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);
      })
  }
}
5
boyukbas

このようにスマートテーブルに設定してみてください

<ng2-smart-table #grid [settings]="settings" ... >

そして、コンポーネントで、次のような設定を定義します。

  public settings: TableSettings = new TableSettings();

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

また、リクエストをバックエンドにカスタマイズする必要がある場合は、データの取得/ページ付け/並べ替えに使用されるServerDataSourceの構成パラメーターがあります。

enter image description here

1
Alex Efimov

{endPointBase}/ng2-smart-tableにあるエンティティのエンドポイントがある場合、処理している場所key_likeリクエストパラメータ（例：@Requestparamスプリングデータへのマップ例）、クライアント側で使用できます：

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;
    }
}
0
amjr