Primeng UI框架中分页组件用法-CSDN博客

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、完结。

转载于:https://www.cnblogs.com/hsl-shiliang/p/9052403.html