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

【问题标题】：how to implement pagination for a simple html table in angular2如何在angular2中为一个简单的html表格实现分页
【发布时间】：2017-07-27 15:13:58
【问题描述】：

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

模块.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 我需要转到第二页。我是角度新手。我应该如何实现分页？任何帮助都会非常有帮助。

【问题讨论】：

标签： angular pagination primeng

【解决方案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)
}
}

【讨论】：