Angular pagination not working in data-table

Multi tool use
I am trying to apply pagination on the data table but its not working as expected.
I have been trying to apply pagination through @viewChild. have imported necessary module.
This is my code...
import {MatPaginator} from '@angular/material';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material';
OFFER_DATA = new MatTableDataSource<IOfferItems>(this.OFFER_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private _offerService: OfferService){}
ngOnInit() {
this._offerService.getOffers()
.subscribe((offerData) => {
this.OFFER_DATA = offerData;
this.OFFER_DATA.paginator = this.paginator;
});
}
HTML -
<table mat-table [dataSource]="OFFER_DATA" matSort class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let offer"> {{offer.id}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let offer"> {{offer.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)">
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>
</mat-paginator>
angular
add a comment |
I am trying to apply pagination on the data table but its not working as expected.
I have been trying to apply pagination through @viewChild. have imported necessary module.
This is my code...
import {MatPaginator} from '@angular/material';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material';
OFFER_DATA = new MatTableDataSource<IOfferItems>(this.OFFER_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private _offerService: OfferService){}
ngOnInit() {
this._offerService.getOffers()
.subscribe((offerData) => {
this.OFFER_DATA = offerData;
this.OFFER_DATA.paginator = this.paginator;
});
}
HTML -
<table mat-table [dataSource]="OFFER_DATA" matSort class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let offer"> {{offer.id}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let offer"> {{offer.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)">
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>
</mat-paginator>
angular
provide HTML content also
– SAURABH RATHOD
Dec 31 '18 at 9:04
Done Please check!!
– md_salm
Dec 31 '18 at 9:27
it's working for me according to your code stackblitz.com/edit/…
– SAURABH RATHOD
Dec 31 '18 at 10:22
It works fine with hard-coded data. In my case the data is dynamic.
– md_salm
Dec 31 '18 at 10:35
add a comment |
I am trying to apply pagination on the data table but its not working as expected.
I have been trying to apply pagination through @viewChild. have imported necessary module.
This is my code...
import {MatPaginator} from '@angular/material';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material';
OFFER_DATA = new MatTableDataSource<IOfferItems>(this.OFFER_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private _offerService: OfferService){}
ngOnInit() {
this._offerService.getOffers()
.subscribe((offerData) => {
this.OFFER_DATA = offerData;
this.OFFER_DATA.paginator = this.paginator;
});
}
HTML -
<table mat-table [dataSource]="OFFER_DATA" matSort class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let offer"> {{offer.id}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let offer"> {{offer.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)">
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>
</mat-paginator>
angular
I am trying to apply pagination on the data table but its not working as expected.
I have been trying to apply pagination through @viewChild. have imported necessary module.
This is my code...
import {MatPaginator} from '@angular/material';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material';
OFFER_DATA = new MatTableDataSource<IOfferItems>(this.OFFER_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private _offerService: OfferService){}
ngOnInit() {
this._offerService.getOffers()
.subscribe((offerData) => {
this.OFFER_DATA = offerData;
this.OFFER_DATA.paginator = this.paginator;
});
}
HTML -
<table mat-table [dataSource]="OFFER_DATA" matSort class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let offer"> {{offer.id}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let offer"> {{offer.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)">
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>
</mat-paginator>
angular
angular
edited Dec 31 '18 at 9:26
md_salm
asked Dec 31 '18 at 7:20


md_salmmd_salm
11
11
provide HTML content also
– SAURABH RATHOD
Dec 31 '18 at 9:04
Done Please check!!
– md_salm
Dec 31 '18 at 9:27
it's working for me according to your code stackblitz.com/edit/…
– SAURABH RATHOD
Dec 31 '18 at 10:22
It works fine with hard-coded data. In my case the data is dynamic.
– md_salm
Dec 31 '18 at 10:35
add a comment |
provide HTML content also
– SAURABH RATHOD
Dec 31 '18 at 9:04
Done Please check!!
– md_salm
Dec 31 '18 at 9:27
it's working for me according to your code stackblitz.com/edit/…
– SAURABH RATHOD
Dec 31 '18 at 10:22
It works fine with hard-coded data. In my case the data is dynamic.
– md_salm
Dec 31 '18 at 10:35
provide HTML content also
– SAURABH RATHOD
Dec 31 '18 at 9:04
provide HTML content also
– SAURABH RATHOD
Dec 31 '18 at 9:04
Done Please check!!
– md_salm
Dec 31 '18 at 9:27
Done Please check!!
– md_salm
Dec 31 '18 at 9:27
it's working for me according to your code stackblitz.com/edit/…
– SAURABH RATHOD
Dec 31 '18 at 10:22
it's working for me according to your code stackblitz.com/edit/…
– SAURABH RATHOD
Dec 31 '18 at 10:22
It works fine with hard-coded data. In my case the data is dynamic.
– md_salm
Dec 31 '18 at 10:35
It works fine with hard-coded data. In my case the data is dynamic.
– md_salm
Dec 31 '18 at 10:35
add a comment |
1 Answer
1
active
oldest
votes
use #paginator as
<mat-paginator
#paginator
[pageSizeOptions]="[5, 10, 15, 20]"
showFirstLastButtons></mat-paginator>
@ViewChild(MatPaginator) paginator: MatPaginator;
here is a sample code of mine
mat-table-sort-paginator-filter
Thanks man, Its working!!
– md_salm
Dec 31 '18 at 11:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53984707%2fangular-pagination-not-working-in-data-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
use #paginator as
<mat-paginator
#paginator
[pageSizeOptions]="[5, 10, 15, 20]"
showFirstLastButtons></mat-paginator>
@ViewChild(MatPaginator) paginator: MatPaginator;
here is a sample code of mine
mat-table-sort-paginator-filter
Thanks man, Its working!!
– md_salm
Dec 31 '18 at 11:39
add a comment |
use #paginator as
<mat-paginator
#paginator
[pageSizeOptions]="[5, 10, 15, 20]"
showFirstLastButtons></mat-paginator>
@ViewChild(MatPaginator) paginator: MatPaginator;
here is a sample code of mine
mat-table-sort-paginator-filter
Thanks man, Its working!!
– md_salm
Dec 31 '18 at 11:39
add a comment |
use #paginator as
<mat-paginator
#paginator
[pageSizeOptions]="[5, 10, 15, 20]"
showFirstLastButtons></mat-paginator>
@ViewChild(MatPaginator) paginator: MatPaginator;
here is a sample code of mine
mat-table-sort-paginator-filter
use #paginator as
<mat-paginator
#paginator
[pageSizeOptions]="[5, 10, 15, 20]"
showFirstLastButtons></mat-paginator>
@ViewChild(MatPaginator) paginator: MatPaginator;
here is a sample code of mine
mat-table-sort-paginator-filter
edited Dec 31 '18 at 11:14
answered Dec 31 '18 at 10:49


Anil Kumar Reddy AAnil Kumar Reddy A
6019
6019
Thanks man, Its working!!
– md_salm
Dec 31 '18 at 11:39
add a comment |
Thanks man, Its working!!
– md_salm
Dec 31 '18 at 11:39
Thanks man, Its working!!
– md_salm
Dec 31 '18 at 11:39
Thanks man, Its working!!
– md_salm
Dec 31 '18 at 11:39
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53984707%2fangular-pagination-not-working-in-data-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
SB9,Aky6iXyhq8St cnUySMNgrvOnQ3vvpNHmNtX v7oYOV2
provide HTML content also
– SAURABH RATHOD
Dec 31 '18 at 9:04
Done Please check!!
– md_salm
Dec 31 '18 at 9:27
it's working for me according to your code stackblitz.com/edit/…
– SAURABH RATHOD
Dec 31 '18 at 10:22
It works fine with hard-coded data. In my case the data is dynamic.
– md_salm
Dec 31 '18 at 10:35