ngx-pagination - 将分页重置为第一页

Posted 2023-03-29

【中文标题】ngx-pagination - 将分页重置为第一页

【英文标题】：ngx-pagination - Reset pagination to first page

【发布时间】：2018-01-21 15:38:55

【问题描述】：

我将 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>

这按预期工作。显示第一页，并突出显示分页栏中的“1”。

比方说，用户现在点击最后一页。这将突出显示分页栏中的最后一页。到目前为止一切正常。

现在用户通过再次单击“搜索”按钮重新执行搜索。这将重新呈现搜索结果。由于是新搜索，服务器返回第一页。但是，分页栏仍然突出显示最后一页。

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

Angular 版本：4.2.4 ngx-分页版本：3.0.0

【问题讨论】：

看起来您将当前页面传递给分页管道，如果您在想要重置时将其设置为 1 可能会起作用。

【参考方案1】：

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

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>

【讨论】：

如果我们使用了 paginaiton-template 而不是 pagination-controls 怎么办？

@AmanSatija 我已经尝试过，我认为正在使用自定义模板...查看此演示：stackblitz.com/edit/ngx-pagination-pwb6au?file=app/… 如果您仍然有问题，请更新 stackblitz 并在线程中分享它

绝妙的解决方案！！