CODEWITHSUNDEEP
angularpaginationprimeng
Khushi
Khushi

Reputation: 1859

how to implement pagination for a simple html table in angular2

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: Pagination

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.

Upvotes: 1

Views: 3851

Answers (1)

Swar
Swar

Reputation: 182

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

Upvotes: 2

Related Questions