0
111
Viewscorrect implementation of datasource pagination
So at first page it shows the corrrect display
But when I click next page it is displaying , it it displaying 21-20 of , which is wrong.
#html code that uses the component add passes the prefix text and suffix text
<app-table-paginator-text [dataSource]="dataSource" [prefixText]="'Showing'" [suffixText]="'results'"></app-table-paginator-text>
#data source html code
<div id="table-paginator-text" class="secondary-text" *ngIf="dataSource.paginator !== undefined">
{{prefixText}} {{(dataSource.paginator.pageIndex === 0)? 1: (dataSource.paginator.pageSize * dataSource.paginator.pageIndex) + 1 }} - {{this.dataSource.connect().value.length}} of {{dataSource.data.length}} {{suffixText}}
</div>
·
Juan Pablo Isaza
2 answers
Answer question0
In your data source code, you are correctly offsetting the left-hand number by the pageSize, but the right-hand side is simply the length of the current set. You need to add the offset there, too. I think the following should do it:
(dataSource.paginator.pageSize * dataSource.paginator.pageIndex) + this.dataSource.connect().value.length
·
Juan Pablo Isaza
Report
0
Try:
<div id="table-paginator-text" class="secondary-text" *ngIf="dataSource.paginator !== undefined">
{{prefixText}} {{(dataSource.paginator.pageIndex === 0)? 1: (dataSource.paginator.pageSize * dataSource.paginator.pageIndex + 1)}} - {{dataSource.paginator.pageSize * dataSource.paginator.pageIndex + this.dataSource.connect().value.length}} of {{dataSource.data.length}} {{suffixText}}
</div>
·
Juan Pablo Isaza
Report
Answer question