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 - 重置分頁到第一頁

回答

相關問題