Question

我正在使用ngx-pagination与服务器端分页。因此，用户输入一些搜索条件并点击搜索按钮。这导致向服务器调用结果的第一页。在客户端，我有这个代码来显示分页控件

<div class="col-sm-4">
  <pagination-controls (pageChange)="getPage($event)" 
                       id="serverPaging">
  </pagination-controls>
</div>

<div *ngFor="let result of results | paginate: { 
  id:'serverPaging', 
  itemsPerPage: 10, 
  currentPage: p, 
  totalItems: totalResultCount }">
  ...
</div>

这可以按预期工作。显示第一页并且＆＃39; 1＆＃39;在分页栏中突出显示。

让我们说，用户现在点击最后一页。这将突出显示分页栏中的最后一页。到目前为止，一切都按预期运作。

现在，用户点击“搜索”即可重新执行搜索。按钮再次。这会重新呈现搜索结果。由于它是一个全新的搜索，服务器返回第一页。但是，分页栏仍然会突出显示最后一页。

如何在某些操作上将分页栏重置为第一页，例如重新执行搜索。

Angular版本：4.2.4 ngx-pagination版本：3.0.0

Answer 1

如果将currentPage属性与 .ts 文件中的变量绑定，则可以强制进行更新。
对于instnace：

<强> component.ts

export class DemoComponent implements OnInit {

  public p: number; //Declare the variable that you're using in currentPage

  //Constructor and OnInit...

  onSearch(word: string): void {
    this.SearchService.search(word).subscribe((data: Array<any>) => {
        this.data = data;
        this.p = 1;
    });
  }
}

<强> HTML

<pagination-controls (pageChange)="p = $event"></pagination-controls>

<div *ngFor="let d of data | paginate: { 
  itemsPerPage: 10, 
  currentPage: p, 
  totalItems: total }"></div>

ngx-pagination - 将分页重置为首页

1 个答案: