2017-03-07 20 views
1

私はテーブルを持っています。私は、ページ分割を実装する必要があります。私はそれのためのng2 - ページネーションをインストールするだけです。それは私のために働いていない。次https://github.com/michaelbromley/ng2-pagination 私のコードファイルがあるのです:angle2の単純なhtmlテーブルのページングを実装する方法

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> 

しかし、それはこのように見える: Pagination

どのように実装することができますし、これへの実際のページネーションを改善します。 2でクリックすると2ページ目に移動する必要があります。角度に新しい。ページネーションはどのように実装する必要がありますか?どんな助けでも本当に感謝しています。

答えて

2
<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データテーブルを使用します。
[行] = "10" [ページネータ] = "真" [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) 
} 
} 
関連する問題