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.

Swar · Accepted Answer · 2017-04-28 11:08:09Z

<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)
}
}

Collectives™ on Stack Overflow

how to implement pagination for a simple html table in angular2

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related