如何在angular2中为一个简单的html表实现分页

Question

我有一张桌子，我需要实现分页。我怎么能在angular2中做。我只是为此安装ng2-pagination。但它不适合我。我关注https://github.com/michaelbromley/ng2-pagination 我的代码文件是：

module.ts

import { PaginatorModule } from 'primeng/primeng';

@NgModule({
 imports: [
 PaginatorModule
 ],
 exports: [
    PaginatorModule
 ]
})

component.html

<p-paginator [rows]="3" [totalRecords]="totalResults" styleClass="ui-paginator-bottom; ui-paginator-pages"></p-paginator>

但它看起来像这样：

我如何实现和改进对此的实际分页。如果我点击2我需要转到第二页。我是角色的新手。我应该如何实施分页？任何帮助都会非常有帮助。

Answer 1

<p-dataTable [value]="data"  [rows]="5" [paginator]="true" [rowsPerPageOptions]="[5,10,20]" [responsive]="true"   >   
    <p-column field="xxx" header="xxx" [sortable]="true" [filter]="true" filterPlaceholder="Search">></p-column>
    <p-column field="yyy" header="yyy" [sortable]="true" [filter]="true" filterPlaceholder="Search">></p-column>
    <p-column field="zzz" header="zzz" [sortable]="true" [filter]="true" filterPlaceholder="Search">></p-column>
</p-dataTable>

将Primeng数据表与默认的分页选项一起使用 [rows] =“5”[paginator] =“true”[rowsPerPageOptions] =“[5,10,20]”

import { Component, OnInit } from '@angular/core';
import {DataTableModule,SharedModule} from 'primeng/primeng';'
import {PaginatorModule} from 'primeng/primeng';
import {ContentService} from '.....';

@Component({
 ......
})
export class Mypage implements OnInit {
data: books[];
errormessage:string;

constructor(private _service: ContentService) {
}

ngOnInit() {
console.log('ngonit');

 this._service.getmybooks().then(data => this.data = data)
 console.log(this.data)
}
}