如何在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數據表與默認分頁選項一起使用。
[行] = 「5」[分頁程序] = 「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) 
} 
}