Question

我想知道是否有启用上一个和下一个按钮并将它们引发事件的垫子分页器。

我有一张要在后端执行所有操作的表。我获取加载时以及用户更改每页项目时需要的行。但是，如果我将页面设置为10，查询10，然后显示10，则下一个按钮将被禁用（如果我查询的页面大于1，则上一个按钮也将被禁用）。

有没有一种方法可以使这些按钮不被禁用并触发事件，以便我可以为下一组10,20等调用api？

我尝试使每页的项目数量增加一倍。这仅适用于每页更改项目，但是如果用户单击“下一个”，“下一个”，“下一个”，“上一个”，“上一个”和“下一个”，它将继续加载，因此我不确定如何为其提供缓冲

我尝试破解hasNextPage（）方法，尝试将其设置为true，尽管这不是一个好的解决方案，因为我不想伪造该方法的返回值。

模板

<mat-paginator
  [pageSizeOptions]="[5, 10, 20]"
  [pageSize]="10"
  (page)="onPaginate($event)">
</mat-paginator>

组件

// ViewChild can't catch elem inside an *ngIf in ngAfterViewInit so we set the paginator here
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
  this.paginator = mp
  this.dataSource.paginator = this.paginator
  // this.paginator.disabled = false
}

// On Init
this.defects$.subscribe((defects: Defect[]) => {
  if(defects) {
    this.dataSource = new MatTableDataSource(defects)
    this.defects = defects
    this.dataSource.paginator = this.paginator
    // this.paginator._intl.itemsPerPageLabel = 'asdfasdfasdf'
  }
})

public onPaginate(event): void {

  // this is me trying to get next page not to load unless it's hit the length it's already loaded
  // if(event.previousPageIndex < event.pageIndex) this.numberOfNextPages++
  // else if (event.previousPageIndex > event.pageIndex) this.numberOfPrevPages++


  if(event.previousPageIndex < event.pageIndex && this.numberOfNextPages - this.numberOfPrevPages <= 0) {
    this.pageQuery = `&page=${event.pageIndex}&perPage=${event.length + event.pageSize}`
    this.store.dispatch(new GetDefectListWithQuery(this.companyId, this.sortQuery, this.pageQuery))
  } else if(event.previousPageIndex > event.pageIndex) {
    console.log('hey')
  } else {
    this.pageQuery = `&page=${event.pageIndex + 1}&perPage=${event.pageSize * 2}`  // '&page=1&perPage=10'
    this.store.dispatch(new GetDefectListWithQuery(this.companyId, this.sortQuery, this.pageQuery))
  }
}

理想情况下，我希望启用next和prev按钮（除非它们分别位于最后一页和第一页），并且只查询用户在每个页面选择项中选择的pageSize。

但是，如果不可能，我如何让我的分页逻辑仅查询是否达到已加载的长度，而不是每次有人单击时都保持加载？

有没有一种方法可以启用MatPaginator下一个/上一个按钮进行服务器端分页？

0 个答案: