how to implement pagination for a simple html table in angular2

Question

i have an table, i need to implement pagination.How can i do in angular2. i just install ng2-pagination for that. but its not working for me. am following https://github.com/michaelbromley/ng2-pagination my code files are:

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>

But it looking like this:

how can i implement and improve actual pagination to this. if i click in 2 i need to go to second page. am new to angular. How should i implement pagination? Any help will really appreciable very helpfull.

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>

Use Primeng datatable with the default pagination options.
[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)
}
}