ngx-pagination - 重置分页到第一页

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

可以说，用户现在点击最后一页。这会突出显示分页栏中的最后一页。一切工作如预期到目前为止。

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

如何将分页栏重置为某个操作的第一页，如重新执行搜索。

角版本：4.2.4 NGX-分页版本：3.0.0

来源

2017-08-13 kayasa

看起来像你传递当前页的PAGINATE管，可能如果你将其设置为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>

来源

2017-08-13 19:24:53

ngx-pagination - 重置分页到第一页

回答

相关问题