Primeng UI框架中 分頁組件用法

1、在當前模塊或當前頁面的對應的module.ts文件中引入相應組件模塊，如：core.module.ts模塊。

import { PaginatorModule } from 'primeng/primeng';
@NgModule({
    imports: [
        PaginatorModule,
    ],
    
    providers: [
        ActiveService
    ],
})
export class CoreModule {
}

2、html文件中使用如下：

<p-paginator *ngIf="total>pageSize" rows="{{ pageSize }}" totalRecords="{{ total }}" (onPageChange)="onPage($event)"></p-paginator>

解釋：total為后台返回的列表總條數，pageSize為配置文件中設置的每頁顯示的個數。當數據庫中總的total小於pageSize時，不顯示分頁組件。

onPageChange方法為單擊頁數，請求相應的數據列表，$event.page為當前點擊請求的第幾頁。

3、分頁請求方法邏輯代碼實現。

export class ActiveList implements OnInit {
    page = 0;
    pageSize:number = Conf.pageSize;
    total:any
    constroct(){

    }   
     onPage(event: any) {
            // 當點擊的頁數和當前顯示的頁數不等是，請求單擊頁對應的數據
            if (this.page != event.page) {
                this.page = event.page;
                this.refresh();
            }
    }    
    refresh() {
        this.items = [];
        let that = this;
        let loading = this.loadCtrl.create({
            content: '數據加載中...'
        });
        loading.present();
        var params = {
            page: this.page,
            pageSize:this.pageSize
        };
        this.service.query(Conf.active, params).then((resp: any) => {
            if (resp.code == 200) {
                loading.dismiss();
                this.topicList = _.isArray(resp.data) ? resp.data : [];
                this.total = _.isNumber(resp.total) ? resp.total : 0;
                console.log(this.items)
            }
        }, (err: any) => {
            loading.dismiss();
            that.translate.get("ERROR").subscribe(value => {
                err = value;
            });
            let toast = this.toastCtrl.create({
                message: err,
                duration: 3000,
                position: ''
            });
            toast.present();
        })
    }
}

4、完結。