Angular pagination not working in data-table

Multi tool use
Multi tool use












0















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>









share|improve this question

























  • 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
















0















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>









share|improve this question

























  • 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














0












0








0








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>









share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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



















  • 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












1 Answer
1






active

oldest

votes


















0














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






share|improve this answer


























  • Thanks man, Its working!!

    – md_salm
    Dec 31 '18 at 11:39











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


}
});














draft saved

draft discarded


















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









0














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






share|improve this answer


























  • Thanks man, Its working!!

    – md_salm
    Dec 31 '18 at 11:39
















0














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






share|improve this answer


























  • Thanks man, Its working!!

    – md_salm
    Dec 31 '18 at 11:39














0












0








0







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






share|improve this answer















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







share|improve this answer














share|improve this answer



share|improve this answer








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



















  • 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


















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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
ks23zZSVmKVMM,aLnZlp6IdkGaQjo2,tLxiIV7u,kws lH KT06I 2 cSvVmfxKce2urkROkK,PEU9y

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas