Remove splice function in Angular Material Pagination
0
There is a an angular material data table with pagination which is used to display the data, the data is in the form of an array, the issue is when the next handle page is clicked the index value again starts from 1, but i need the data to have to continue index value.
Below is the code:-
import {
Component,
OnInit,
ViewChild
} from '@angular/core';
import {
MatPaginator,
MatTableDataSource
} from '@angular/material';
/**
* @title Table with pagination
*/
@Component({
selector: 'table-pagination-example',
styleUrls: ['table-pagination-example.css'],
templateUrl: 'table-pagination-example.html',
})
export class TablePaginationExample implements OnInit {
displayedColumns: string = ['position', 'name'];
public array: any;
public pageSize = 5;
public currentPage = 0;
public totalSize = 0;
dataSource = [{
position: 1,
name: 'Hydrogen'
},
{
position: 2,
name: 'Helium'
},
{
position: 3,
name: 'Lithium'
},
{
position: 4,
name: 'Beryllium'
},
{
position: 5,
name: 'Boron'
},
{
position: 6,
name: 'Carbon'
},
{
position: 7,
name: 'Nitrogen'
},
{
position: 8,
name: 'Oxygen'
},
{
position: 9,
name: 'Fluorine'
},
{
position: 10,
name: 'Neon'
},
{
position: 11,
name: 'Sodium'
},
{`enter code here`
position: 12,
name: 'Magnesium'
},
{
position: 13,
name: 'Aluminum',
},
{
position: 14,
name: 'Silicon'
},
{
position: 15,
name: 'Phosphorus'
},
]
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit() {
this.array = this.dataSource;
this.totalSize = this.dataSource.length;
this.iterator();
console.log(this.totalSize, "total size")
}
// function for pagination
private iterator() {
const end = (this.currentPage + 1) * this.pageSize;
const start = this.currentPage * this.pageSize;
const part = this.array.slice(start, end);
this.dataSource = part;
}
public handlePage(e: any) {
this.currentPage = e.pageIndex;
this.pageSize = e.pageSize;
this.iterator();
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element let i = index"> {{ i + 1 }} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize" [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>
</div>If an array has 10 values want to display 5 on the first page, so in the first-page index value will be from 1 to 5 and
in Pagination the iterator() function is splicing the array value hence it's taking again from the index value 1 for the data 6 to 10th in next page.
Is there any way to avoid splicing in pagination.
angular angular-material2 edited Nov 16 '18 at 12:28
Mukesh Kumar
376213
asked Nov 16 '18 at 11:23
vinutavinuta
548
add a comment |
0
There is a an angular material data table with pagination which is used to display the data, the data is in the form of an array, the issue is when the next handle page is clicked the index value again starts from 1, but i need the data to have to continue index value.
Below is the code:-
import {
Component,
OnInit,
ViewChild
} from '@angular/core';
import {
MatPaginator,
MatTableDataSource
} from '@angular/material';
/**
* @title Table with pagination
*/
@Component({
selector: 'table-pagination-example',
styleUrls: ['table-pagination-example.css'],
templateUrl: 'table-pagination-example.html',
})
export class TablePaginationExample implements OnInit {
displayedColumns: string = ['position', 'name'];
public array: any;
public pageSize = 5;
public currentPage = 0;
public totalSize = 0;
dataSource = [{
position: 1,
name: 'Hydrogen'
},
{
position: 2,
name: 'Helium'
},
{
position: 3,
name: 'Lithium'
},
{
position: 4,
name: 'Beryllium'
},
{
position: 5,
name: 'Boron'
},
{
position: 6,
name: 'Carbon'
},
{
position: 7,
name: 'Nitrogen'
},
{
position: 8,
name: 'Oxygen'
},
{
position: 9,
name: 'Fluorine'
},
{
position: 10,
name: 'Neon'
},
{
position: 11,
name: 'Sodium'
},
{`enter code here`
position: 12,
name: 'Magnesium'
},
{
position: 13,
name: 'Aluminum',
},
{
position: 14,
name: 'Silicon'
},
{
position: 15,
name: 'Phosphorus'
},
]
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit() {
this.array = this.dataSource;
this.totalSize = this.dataSource.length;
this.iterator();
console.log(this.totalSize, "total size")
}
// function for pagination
private iterator() {
const end = (this.currentPage + 1) * this.pageSize;
const start = this.currentPage * this.pageSize;
const part = this.array.slice(start, end);
this.dataSource = part;
}
public handlePage(e: any) {
this.currentPage = e.pageIndex;
this.pageSize = e.pageSize;
this.iterator();
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element let i = index"> {{ i + 1 }} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize" [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>
</div>If an array has 10 values want to display 5 on the first page, so in the first-page index value will be from 1 to 5 and
in Pagination the iterator() function is splicing the array value hence it's taking again from the index value 1 for the data 6 to 10th in next page.
Is there any way to avoid splicing in pagination.
angular angular-material2 edited Nov 16 '18 at 12:28
Mukesh Kumar
376213
asked Nov 16 '18 at 11:23
vinutavinuta
548
why do you want to prevent it?
– PierreDuc
Nov 16 '18 at 11:50
because I need to display data based on change function, and change function will apply only to first 5 data and next it be spliced and again change function has to to run to display next 5 data
– vinuta
Nov 16 '18 at 12:38
add a comment |
0
0
0
There is a an angular material data table with pagination which is used to display the data, the data is in the form of an array, the issue is when the next handle page is clicked the index value again starts from 1, but i need the data to have to continue index value.
Below is the code:-
import {
Component,
OnInit,
ViewChild
} from '@angular/core';
import {
MatPaginator,
MatTableDataSource
} from '@angular/material';
/**
* @title Table with pagination
*/
@Component({
selector: 'table-pagination-example',
styleUrls: ['table-pagination-example.css'],
templateUrl: 'table-pagination-example.html',
})
export class TablePaginationExample implements OnInit {
displayedColumns: string = ['position', 'name'];
public array: any;
public pageSize = 5;
public currentPage = 0;
public totalSize = 0;
dataSource = [{
position: 1,
name: 'Hydrogen'
},
{
position: 2,
name: 'Helium'
},
{
position: 3,
name: 'Lithium'
},
{
position: 4,
name: 'Beryllium'
},
{
position: 5,
name: 'Boron'
},
{
position: 6,
name: 'Carbon'
},
{
position: 7,
name: 'Nitrogen'
},
{
position: 8,
name: 'Oxygen'
},
{
position: 9,
name: 'Fluorine'
},
{
position: 10,
name: 'Neon'
},
{
position: 11,
name: 'Sodium'
},
{`enter code here`
position: 12,
name: 'Magnesium'
},
{
position: 13,
name: 'Aluminum',
},
{
position: 14,
name: 'Silicon'
},
{
position: 15,
name: 'Phosphorus'
},
]
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit() {
this.array = this.dataSource;
this.totalSize = this.dataSource.length;
this.iterator();
console.log(this.totalSize, "total size")
}
// function for pagination
private iterator() {
const end = (this.currentPage + 1) * this.pageSize;
const start = this.currentPage * this.pageSize;
const part = this.array.slice(start, end);
this.dataSource = part;
}
public handlePage(e: any) {
this.currentPage = e.pageIndex;
this.pageSize = e.pageSize;
this.iterator();
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element let i = index"> {{ i + 1 }} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize" [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>
</div>If an array has 10 values want to display 5 on the first page, so in the first-page index value will be from 1 to 5 and
in Pagination the iterator() function is splicing the array value hence it's taking again from the index value 1 for the data 6 to 10th in next page.
Is there any way to avoid splicing in pagination.
angular angular-material2 edited Nov 16 '18 at 12:28
Mukesh Kumar
376213
asked Nov 16 '18 at 11:23
vinutavinuta
548
There is a an angular material data table with pagination which is used to display the data, the data is in the form of an array, the issue is when the next handle page is clicked the index value again starts from 1, but i need the data to have to continue index value.
Below is the code:-
import {
Component,
OnInit,
ViewChild
} from '@angular/core';
import {
MatPaginator,
MatTableDataSource
} from '@angular/material';
/**
* @title Table with pagination
*/
@Component({
selector: 'table-pagination-example',
styleUrls: ['table-pagination-example.css'],
templateUrl: 'table-pagination-example.html',
})
export class TablePaginationExample implements OnInit {
displayedColumns: string = ['position', 'name'];
public array: any;
public pageSize = 5;
public currentPage = 0;
public totalSize = 0;
dataSource = [{
position: 1,
name: 'Hydrogen'
},
{
position: 2,
name: 'Helium'
},
{
position: 3,
name: 'Lithium'
},
{
position: 4,
name: 'Beryllium'
},
{
position: 5,
name: 'Boron'
},
{
position: 6,
name: 'Carbon'
},
{
position: 7,
name: 'Nitrogen'
},
{
position: 8,
name: 'Oxygen'
},
{
position: 9,
name: 'Fluorine'
},
{
position: 10,
name: 'Neon'
},
{
position: 11,
name: 'Sodium'
},
{`enter code here`
position: 12,
name: 'Magnesium'
},
{
position: 13,
name: 'Aluminum',
},
{
position: 14,
name: 'Silicon'
},
{
position: 15,
name: 'Phosphorus'
},
]
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit() {
this.array = this.dataSource;
this.totalSize = this.dataSource.length;
this.iterator();
console.log(this.totalSize, "total size")
}
// function for pagination
private iterator() {
const end = (this.currentPage + 1) * this.pageSize;
const start = this.currentPage * this.pageSize;
const part = this.array.slice(start, end);
this.dataSource = part;
}
public handlePage(e: any) {
this.currentPage = e.pageIndex;
this.pageSize = e.pageSize;
this.iterator();
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element let i = index"> {{ i + 1 }} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize" [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>
</div>If an array has 10 values want to display 5 on the first page, so in the first-page index value will be from 1 to 5 and
in Pagination the iterator() function is splicing the array value hence it's taking again from the index value 1 for the data 6 to 10th in next page.
Is there any way to avoid splicing in pagination.
import {
Component,
OnInit,
ViewChild
} from '@angular/core';
import {
MatPaginator,
MatTableDataSource
} from '@angular/material';
/**
* @title Table with pagination
*/
@Component({
selector: 'table-pagination-example',
styleUrls: ['table-pagination-example.css'],
templateUrl: 'table-pagination-example.html',
})
export class TablePaginationExample implements OnInit {
displayedColumns: string = ['position', 'name'];
public array: any;
public pageSize = 5;
public currentPage = 0;
public totalSize = 0;
dataSource = [{
position: 1,
name: 'Hydrogen'
},
{
position: 2,
name: 'Helium'
},
{
position: 3,
name: 'Lithium'
},
{
position: 4,
name: 'Beryllium'
},
{
position: 5,
name: 'Boron'
},
{
position: 6,
name: 'Carbon'
},
{
position: 7,
name: 'Nitrogen'
},
{
position: 8,
name: 'Oxygen'
},
{
position: 9,
name: 'Fluorine'
},
{
position: 10,
name: 'Neon'
},
{
position: 11,
name: 'Sodium'
},
{`enter code here`
position: 12,
name: 'Magnesium'
},
{
position: 13,
name: 'Aluminum',
},
{
position: 14,
name: 'Silicon'
},
{
position: 15,
name: 'Phosphorus'
},
]
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit() {
this.array = this.dataSource;
this.totalSize = this.dataSource.length;
this.iterator();
console.log(this.totalSize, "total size")
}
// function for pagination
private iterator() {
const end = (this.currentPage + 1) * this.pageSize;
const start = this.currentPage * this.pageSize;
const part = this.array.slice(start, end);
this.dataSource = part;
}
public handlePage(e: any) {
this.currentPage = e.pageIndex;
this.pageSize = e.pageSize;
this.iterator();
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element let i = index"> {{ i + 1 }} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize" [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>
</div>import {
Component,
OnInit,
ViewChild
} from '@angular/core';
import {
MatPaginator,
MatTableDataSource
} from '@angular/material';
/**
* @title Table with pagination
*/
@Component({
selector: 'table-pagination-example',
styleUrls: ['table-pagination-example.css'],
templateUrl: 'table-pagination-example.html',
})
export class TablePaginationExample implements OnInit {
displayedColumns: string = ['position', 'name'];
public array: any;
public pageSize = 5;
public currentPage = 0;
public totalSize = 0;
dataSource = [{
position: 1,
name: 'Hydrogen'
},
{
position: 2,
name: 'Helium'
},
{
position: 3,
name: 'Lithium'
},
{
position: 4,
name: 'Beryllium'
},
{
position: 5,
name: 'Boron'
},
{
position: 6,
name: 'Carbon'
},
{
position: 7,
name: 'Nitrogen'
},
{
position: 8,
name: 'Oxygen'
},
{
position: 9,
name: 'Fluorine'
},
{
position: 10,
name: 'Neon'
},
{
position: 11,
name: 'Sodium'
},
{`enter code here`
position: 12,
name: 'Magnesium'
},
{
position: 13,
name: 'Aluminum',
},
{
position: 14,
name: 'Silicon'
},
{
position: 15,
name: 'Phosphorus'
},
]
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit() {
this.array = this.dataSource;
this.totalSize = this.dataSource.length;
this.iterator();
console.log(this.totalSize, "total size")
}
// function for pagination
private iterator() {
const end = (this.currentPage + 1) * this.pageSize;
const start = this.currentPage * this.pageSize;
const part = this.array.slice(start, end);
this.dataSource = part;
}
public handlePage(e: any) {
this.currentPage = e.pageIndex;
this.pageSize = e.pageSize;
this.iterator();
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element let i = index"> {{ i + 1 }} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize" [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>
</div>edited Nov 16 '18 at 12:28
Mukesh Kumar
376213
asked Nov 16 '18 at 11:23
vinutavinuta
548
edited Nov 16 '18 at 12:28
Mukesh Kumar
376213
asked Nov 16 '18 at 11:23
vinutavinuta
548
edited Nov 16 '18 at 12:28
Mukesh Kumar
376213
edited Nov 16 '18 at 12:28
Mukesh Kumar
376213
edited Nov 16 '18 at 12:28
Mukesh Kumar
376213
376213
asked Nov 16 '18 at 11:23
vinutavinuta
548
asked Nov 16 '18 at 11:23
vinutavinuta
548
asked Nov 16 '18 at 11:23
vinutavinuta
548
548
why do you want to prevent it?
– PierreDuc
Nov 16 '18 at 11:50
because I need to display data based on change function, and change function will apply only to first 5 data and next it be spliced and again change function has to to run to display next 5 data
– vinuta
Nov 16 '18 at 12:38
add a comment |
why do you want to prevent it?
– PierreDuc
Nov 16 '18 at 11:50
because I need to display data based on change function, and change function will apply only to first 5 data and next it be spliced and again change function has to to run to display next 5 data
– vinuta
Nov 16 '18 at 12:38
why do you want to prevent it?
– PierreDuc
Nov 16 '18 at 11:50
why do you want to prevent it?
– PierreDuc
Nov 16 '18 at 11:50
because I need to display data based on change function, and change function will apply only to first 5 data and next it be spliced and again change function has to to run to display next 5 data
– vinuta
Nov 16 '18 at 12:38
because I need to display data based on change function, and change function will apply only to first 5 data and next it be spliced and again change function has to to run to display next 5 data
– vinuta
Nov 16 '18 at 12:38
add a comment |
1 Answer
1
active
oldest
votes
0
Why do you want to prevent splicing? If the incorrect index value is showing on the next page is your problem then you can change your position column value as below to display the correct index on the next page:
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element let i = index"> {{ (pageSize*currentPage) + i + 1 }} </td>
</ng-container>
answered Nov 16 '18 at 12:03
Mukesh KumarMukesh Kumar
376213
I don't need splicing function because I have a change function, based on change function i need to display the data, if i select 5 data to be displayed then change function will apply to onle those 5 data, if i click on next, then next data from 6 to 10th will be empty and again i have to choose the change function
– vinuta
Nov 16 '18 at 12:36
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
});
}
});
draft saved
draft discarded
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%2f53336886%2fremove-splice-function-in-angular-material-pagination%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
Why do you want to prevent splicing? If the incorrect index value is showing on the next page is your problem then you can change your position column value as below to display the correct index on the next page:
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element let i = index"> {{ (pageSize*currentPage) + i + 1 }} </td>
</ng-container>
answered Nov 16 '18 at 12:03
Mukesh KumarMukesh Kumar
376213
I don't need splicing function because I have a change function, based on change function i need to display the data, if i select 5 data to be displayed then change function will apply to onle those 5 data, if i click on next, then next data from 6 to 10th will be empty and again i have to choose the change function
– vinuta
Nov 16 '18 at 12:36
add a comment |
0
Why do you want to prevent splicing? If the incorrect index value is showing on the next page is your problem then you can change your position column value as below to display the correct index on the next page:
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element let i = index"> {{ (pageSize*currentPage) + i + 1 }} </td>
</ng-container>
answered Nov 16 '18 at 12:03
Mukesh KumarMukesh Kumar
376213
I don't need splicing function because I have a change function, based on change function i need to display the data, if i select 5 data to be displayed then change function will apply to onle those 5 data, if i click on next, then next data from 6 to 10th will be empty and again i have to choose the change function
– vinuta
Nov 16 '18 at 12:36
add a comment |
0
0
0
Why do you want to prevent splicing? If the incorrect index value is showing on the next page is your problem then you can change your position column value as below to display the correct index on the next page:
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element let i = index"> {{ (pageSize*currentPage) + i + 1 }} </td>
</ng-container>
answered Nov 16 '18 at 12:03
Mukesh KumarMukesh Kumar
376213
Why do you want to prevent splicing? If the incorrect index value is showing on the next page is your problem then you can change your position column value as below to display the correct index on the next page:
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element let i = index"> {{ (pageSize*currentPage) + i + 1 }} </td>
</ng-container>
answered Nov 16 '18 at 12:03
Mukesh KumarMukesh Kumar
376213
answered Nov 16 '18 at 12:03
Mukesh KumarMukesh Kumar
376213
answered Nov 16 '18 at 12:03
Mukesh KumarMukesh Kumar
376213
answered Nov 16 '18 at 12:03
Mukesh KumarMukesh Kumar
376213
376213
I don't need splicing function because I have a change function, based on change function i need to display the data, if i select 5 data to be displayed then change function will apply to onle those 5 data, if i click on next, then next data from 6 to 10th will be empty and again i have to choose the change function
– vinuta
Nov 16 '18 at 12:36
add a comment |
I don't need splicing function because I have a change function, based on change function i need to display the data, if i select 5 data to be displayed then change function will apply to onle those 5 data, if i click on next, then next data from 6 to 10th will be empty and again i have to choose the change function
– vinuta
Nov 16 '18 at 12:36
I don't need splicing function because I have a change function, based on change function i need to display the data, if i select 5 data to be displayed then change function will apply to onle those 5 data, if i click on next, then next data from 6 to 10th will be empty and again i have to choose the change function
– vinuta
Nov 16 '18 at 12:36
I don't need splicing function because I have a change function, based on change function i need to display the data, if i select 5 data to be displayed then change function will apply to onle those 5 data, if i click on next, then next data from 6 to 10th will be empty and again i have to choose the change function
– vinuta
Nov 16 '18 at 12:36
add a comment |
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
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%2f53336886%2fremove-splice-function-in-angular-material-pagination%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
why do you want to prevent it?
– PierreDuc
Nov 16 '18 at 11:50
because I need to display data based on change function, and change function will apply only to first 5 data and next it be spliced and again change function has to to run to display next 5 data
– vinuta
Nov 16 '18 at 12:38