Angular 6 Material table Server and Client side pagination
up vote
1
down vote
favorite
I'd like to ask for some help. I have to make a generic angular material datatable, that gets it's data from a Jira webservice. My problem is that for some cases I'll have to do the pagination on the client site and for some cases I'll have to do it on Jira, because the maximum result that it can return is set to 1000 elements.
The reason why I'll have to do pagination on the client side, is that in many cases a chart is embedded next to the datatbale, what'll have to work with all available elements, not just the ones that are visible on the material table.
What I'd like to avoid is to have more parameters that check if either I'll have to use client/server side pagination.
The related code:
import
Component,
Input,
ViewChild,
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef from '@angular/core';
import MatPaginator, MatSort, MatTableDataSource, MatSlideToggle from '@angular/material';
import TableService from './table.service';
import merge from 'rxjs';
@Component(
selector: 'app-table-component',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
)
export class TableComponent implements AfterViewInit {
@Input() dataTypes: any;
@Input() columnsToDisplay: string;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatSlideToggle) toggle: MatSlideToggle;
private dataSource: any = new MatTableDataSource<any>();
private currentPage;
public selectedTab: any;
public resultsLength: number;
constructor(private service: TableService, private ref: ChangeDetectorRef)
ngAfterViewInit()
this.service.changeFilter(
previousPageIndex: 0,
pageIndex: this.paginator._pageIndex,
pageSize: 5,
length: this.paginator._length,
active: this.sort.active,
direction: 'asc',
checked: false
);
merge(this.paginator.page, this.sort.sortChange, this.toggle.change).subscribe(res =>
this.currentPage = this.paginator.pageIndex;
this.service.changeFilter(res);
)
this.service.dataChanged$.subscribe(res =>
this.dataSource.paginator = this.paginator;
this.dataSource.data = res.tickets;
this.dataSource.paginator.pageIndex = this.currentPage;
this.dataSource.paginator.length = res.results;
What this basically does is that on any event change (sorting, paging and on a toggleswitch) an HTTP request is sent to the Jira backend. In most cases the maximum result will be 10-20 results, but I have a screen where I'll have to fetch 1000-3000 results. In the later case server side pagination is the correct approach I know, but if the results are below reasonable number, I'd like to use client side pagination, again because the Chart uses tha data from the material table.
How should I approach this problem, without adding another @Input to the table component?
Thank you guys in advance!
Edit
Removed timeouts from code to avoid confusion
angular angular-material angular6 material angular-material-table
asked Nov 10 at 9:19
TKrisee
165
add a comment |
up vote
1
down vote
favorite
I'd like to ask for some help. I have to make a generic angular material datatable, that gets it's data from a Jira webservice. My problem is that for some cases I'll have to do the pagination on the client site and for some cases I'll have to do it on Jira, because the maximum result that it can return is set to 1000 elements.
The reason why I'll have to do pagination on the client side, is that in many cases a chart is embedded next to the datatbale, what'll have to work with all available elements, not just the ones that are visible on the material table.
What I'd like to avoid is to have more parameters that check if either I'll have to use client/server side pagination.
The related code:
import
Component,
Input,
ViewChild,
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef from '@angular/core';
import MatPaginator, MatSort, MatTableDataSource, MatSlideToggle from '@angular/material';
import TableService from './table.service';
import merge from 'rxjs';
@Component(
selector: 'app-table-component',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
)
export class TableComponent implements AfterViewInit {
@Input() dataTypes: any;
@Input() columnsToDisplay: string;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatSlideToggle) toggle: MatSlideToggle;
private dataSource: any = new MatTableDataSource<any>();
private currentPage;
public selectedTab: any;
public resultsLength: number;
constructor(private service: TableService, private ref: ChangeDetectorRef)
ngAfterViewInit()
this.service.changeFilter(
previousPageIndex: 0,
pageIndex: this.paginator._pageIndex,
pageSize: 5,
length: this.paginator._length,
active: this.sort.active,
direction: 'asc',
checked: false
);
merge(this.paginator.page, this.sort.sortChange, this.toggle.change).subscribe(res =>
this.currentPage = this.paginator.pageIndex;
this.service.changeFilter(res);
)
this.service.dataChanged$.subscribe(res =>
this.dataSource.paginator = this.paginator;
this.dataSource.data = res.tickets;
this.dataSource.paginator.pageIndex = this.currentPage;
this.dataSource.paginator.length = res.results;
What this basically does is that on any event change (sorting, paging and on a toggleswitch) an HTTP request is sent to the Jira backend. In most cases the maximum result will be 10-20 results, but I have a screen where I'll have to fetch 1000-3000 results. In the later case server side pagination is the correct approach I know, but if the results are below reasonable number, I'd like to use client side pagination, again because the Chart uses tha data from the material table.
How should I approach this problem, without adding another @Input to the table component?
Thank you guys in advance!
Edit
Removed timeouts from code to avoid confusion
angular angular-material angular6 material angular-material-table
asked Nov 10 at 9:19
TKrisee
165
So cant you just always fetch that "reasonable" page size and paginate on client side ? Besides, its kind of simple if-then scenario to me - just write the code for it. Why are you using timeouts your subscribtion is a mystery to me .
– Antoniossss
Nov 10 at 9:57
But in that case how do I tell Jira, when a pagination should happen? The timeouts are there because I tried different approaches, what didn't work, but I'll remove them to avoid confusions
– TKrisee
Nov 10 at 10:05
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I'd like to ask for some help. I have to make a generic angular material datatable, that gets it's data from a Jira webservice. My problem is that for some cases I'll have to do the pagination on the client site and for some cases I'll have to do it on Jira, because the maximum result that it can return is set to 1000 elements.
The reason why I'll have to do pagination on the client side, is that in many cases a chart is embedded next to the datatbale, what'll have to work with all available elements, not just the ones that are visible on the material table.
What I'd like to avoid is to have more parameters that check if either I'll have to use client/server side pagination.
The related code:
import
Component,
Input,
ViewChild,
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef from '@angular/core';
import MatPaginator, MatSort, MatTableDataSource, MatSlideToggle from '@angular/material';
import TableService from './table.service';
import merge from 'rxjs';
@Component(
selector: 'app-table-component',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
)
export class TableComponent implements AfterViewInit {
@Input() dataTypes: any;
@Input() columnsToDisplay: string;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatSlideToggle) toggle: MatSlideToggle;
private dataSource: any = new MatTableDataSource<any>();
private currentPage;
public selectedTab: any;
public resultsLength: number;
constructor(private service: TableService, private ref: ChangeDetectorRef)
ngAfterViewInit()
this.service.changeFilter(
previousPageIndex: 0,
pageIndex: this.paginator._pageIndex,
pageSize: 5,
length: this.paginator._length,
active: this.sort.active,
direction: 'asc',
checked: false
);
merge(this.paginator.page, this.sort.sortChange, this.toggle.change).subscribe(res =>
this.currentPage = this.paginator.pageIndex;
this.service.changeFilter(res);
)
this.service.dataChanged$.subscribe(res =>
this.dataSource.paginator = this.paginator;
this.dataSource.data = res.tickets;
this.dataSource.paginator.pageIndex = this.currentPage;
this.dataSource.paginator.length = res.results;
What this basically does is that on any event change (sorting, paging and on a toggleswitch) an HTTP request is sent to the Jira backend. In most cases the maximum result will be 10-20 results, but I have a screen where I'll have to fetch 1000-3000 results. In the later case server side pagination is the correct approach I know, but if the results are below reasonable number, I'd like to use client side pagination, again because the Chart uses tha data from the material table.
How should I approach this problem, without adding another @Input to the table component?
Thank you guys in advance!
Edit
Removed timeouts from code to avoid confusion
angular angular-material angular6 material angular-material-table
asked Nov 10 at 9:19
TKrisee
165
I'd like to ask for some help. I have to make a generic angular material datatable, that gets it's data from a Jira webservice. My problem is that for some cases I'll have to do the pagination on the client site and for some cases I'll have to do it on Jira, because the maximum result that it can return is set to 1000 elements.
The reason why I'll have to do pagination on the client side, is that in many cases a chart is embedded next to the datatbale, what'll have to work with all available elements, not just the ones that are visible on the material table.
What I'd like to avoid is to have more parameters that check if either I'll have to use client/server side pagination.
The related code:
import
Component,
Input,
ViewChild,
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef from '@angular/core';
import MatPaginator, MatSort, MatTableDataSource, MatSlideToggle from '@angular/material';
import TableService from './table.service';
import merge from 'rxjs';
@Component(
selector: 'app-table-component',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
)
export class TableComponent implements AfterViewInit {
@Input() dataTypes: any;
@Input() columnsToDisplay: string;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatSlideToggle) toggle: MatSlideToggle;
private dataSource: any = new MatTableDataSource<any>();
private currentPage;
public selectedTab: any;
public resultsLength: number;
constructor(private service: TableService, private ref: ChangeDetectorRef)
ngAfterViewInit()
this.service.changeFilter(
previousPageIndex: 0,
pageIndex: this.paginator._pageIndex,
pageSize: 5,
length: this.paginator._length,
active: this.sort.active,
direction: 'asc',
checked: false
);
merge(this.paginator.page, this.sort.sortChange, this.toggle.change).subscribe(res =>
this.currentPage = this.paginator.pageIndex;
this.service.changeFilter(res);
)
this.service.dataChanged$.subscribe(res =>
this.dataSource.paginator = this.paginator;
this.dataSource.data = res.tickets;
this.dataSource.paginator.pageIndex = this.currentPage;
this.dataSource.paginator.length = res.results;
What this basically does is that on any event change (sorting, paging and on a toggleswitch) an HTTP request is sent to the Jira backend. In most cases the maximum result will be 10-20 results, but I have a screen where I'll have to fetch 1000-3000 results. In the later case server side pagination is the correct approach I know, but if the results are below reasonable number, I'd like to use client side pagination, again because the Chart uses tha data from the material table.
How should I approach this problem, without adding another @Input to the table component?
Thank you guys in advance!
Edit
Removed timeouts from code to avoid confusion
import
Component,
Input,
ViewChild,
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef from '@angular/core';
import MatPaginator, MatSort, MatTableDataSource, MatSlideToggle from '@angular/material';
import TableService from './table.service';
import merge from 'rxjs';
@Component(
selector: 'app-table-component',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
)
export class TableComponent implements AfterViewInit {
@Input() dataTypes: any;
@Input() columnsToDisplay: string;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatSlideToggle) toggle: MatSlideToggle;
private dataSource: any = new MatTableDataSource<any>();
private currentPage;
public selectedTab: any;
public resultsLength: number;
constructor(private service: TableService, private ref: ChangeDetectorRef)
ngAfterViewInit()
this.service.changeFilter(
previousPageIndex: 0,
pageIndex: this.paginator._pageIndex,
pageSize: 5,
length: this.paginator._length,
active: this.sort.active,
direction: 'asc',
checked: false
);
merge(this.paginator.page, this.sort.sortChange, this.toggle.change).subscribe(res =>
this.currentPage = this.paginator.pageIndex;
this.service.changeFilter(res);
)
this.service.dataChanged$.subscribe(res =>
this.dataSource.paginator = this.paginator;
this.dataSource.data = res.tickets;
this.dataSource.paginator.pageIndex = this.currentPage;
this.dataSource.paginator.length = res.results;
import
Component,
Input,
ViewChild,
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef from '@angular/core';
import MatPaginator, MatSort, MatTableDataSource, MatSlideToggle from '@angular/material';
import TableService from './table.service';
import merge from 'rxjs';
@Component(
selector: 'app-table-component',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
)
export class TableComponent implements AfterViewInit {
@Input() dataTypes: any;
@Input() columnsToDisplay: string;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatSlideToggle) toggle: MatSlideToggle;
private dataSource: any = new MatTableDataSource<any>();
private currentPage;
public selectedTab: any;
public resultsLength: number;
constructor(private service: TableService, private ref: ChangeDetectorRef)
ngAfterViewInit()
this.service.changeFilter(
previousPageIndex: 0,
pageIndex: this.paginator._pageIndex,
pageSize: 5,
length: this.paginator._length,
active: this.sort.active,
direction: 'asc',
checked: false
);
merge(this.paginator.page, this.sort.sortChange, this.toggle.change).subscribe(res =>
this.currentPage = this.paginator.pageIndex;
this.service.changeFilter(res);
)
this.service.dataChanged$.subscribe(res =>
this.dataSource.paginator = this.paginator;
this.dataSource.data = res.tickets;
this.dataSource.paginator.pageIndex = this.currentPage;
this.dataSource.paginator.length = res.results;
angular angular-material angular6 material angular-material-table
angular angular-material angular6 material angular-material-table
asked Nov 10 at 9:19
TKrisee
165
asked Nov 10 at 9:19
TKrisee
165
edited Nov 10 at 10:08
asked Nov 10 at 9:19
TKrisee
165
asked Nov 10 at 9:19
TKrisee
165
asked Nov 10 at 9:19
TKrisee
165
165
So cant you just always fetch that "reasonable" page size and paginate on client side ? Besides, its kind of simple if-then scenario to me - just write the code for it. Why are you using timeouts your subscribtion is a mystery to me .
– Antoniossss
Nov 10 at 9:57
But in that case how do I tell Jira, when a pagination should happen? The timeouts are there because I tried different approaches, what didn't work, but I'll remove them to avoid confusions
– TKrisee
Nov 10 at 10:05
add a comment |
So cant you just always fetch that "reasonable" page size and paginate on client side ? Besides, its kind of simple if-then scenario to me - just write the code for it. Why are you using timeouts your subscribtion is a mystery to me .
– Antoniossss
Nov 10 at 9:57
But in that case how do I tell Jira, when a pagination should happen? The timeouts are there because I tried different approaches, what didn't work, but I'll remove them to avoid confusions
– TKrisee
Nov 10 at 10:05
So cant you just always fetch that "reasonable" page size and paginate on client side ? Besides, its kind of simple if-then scenario to me - just write the code for it. Why are you using timeouts your subscribtion is a mystery to me .
– Antoniossss
Nov 10 at 9:57
So cant you just always fetch that "reasonable" page size and paginate on client side ? Besides, its kind of simple if-then scenario to me - just write the code for it. Why are you using timeouts your subscribtion is a mystery to me .
– Antoniossss
Nov 10 at 9:57
But in that case how do I tell Jira, when a pagination should happen? The timeouts are there because I tried different approaches, what didn't work, but I'll remove them to avoid confusions
– TKrisee
Nov 10 at 10:05
But in that case how do I tell Jira, when a pagination should happen? The timeouts are there because I tried different approaches, what didn't work, but I'll remove them to avoid confusions
– TKrisee
Nov 10 at 10:05
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53237569%2fangular-6-material-table-server-and-client-side-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
So cant you just always fetch that "reasonable" page size and paginate on client side ? Besides, its kind of simple if-then scenario to me - just write the code for it. Why are you using timeouts your subscribtion is a mystery to me .
– Antoniossss
Nov 10 at 9:57
But in that case how do I tell Jira, when a pagination should happen? The timeouts are there because I tried different approaches, what didn't work, but I'll remove them to avoid confusions
– TKrisee
Nov 10 at 10:05