1、在當(dāng)前模塊或當(dāng)前頁(yè)面的對(duì)應(yīng)的module.ts文件中引入相應(yīng)組件模塊，如：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為后臺(tái)返回的列表總條數(shù)，pageSize為配置文件中設(shè)置的每頁(yè)顯示的個(gè)數(shù)。當(dāng)數(shù)據(jù)庫(kù)中總的total小于pageSize時(shí)，不顯示分頁(yè)組件。

onPageChange方法為單擊頁(yè)數(shù)，請(qǐng)求相應(yīng)的數(shù)據(jù)列表，$event.page為當(dāng)前點(diǎn)擊請(qǐng)求的第幾頁(yè)。

3、分頁(yè)請(qǐng)求方法邏輯代碼實(shí)現(xiàn)。

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

    }   
     onPage(event: any) {
            // 當(dāng)點(diǎn)擊的頁(yè)數(shù)和當(dāng)前顯示的頁(yè)數(shù)不等是，請(qǐng)求單擊頁(yè)對(duì)應(yīng)的數(shù)據(jù)
            if (this.page != event.page) {
                this.page = event.page;
                this.refresh();
            }
    }    
    refresh() {
        this.items = [];
        let that = this;
        let loading = this.loadCtrl.create({
            content: '數(shù)據(jù)加載中...'
        });
        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、完結(jié)。

總結(jié)

以上是生活随笔為你收集整理的Primeng UI框架中 分页组件用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。