Components: Multiple Md-Table with pagination

[DerekJDev]

Bug, feature request, or proposal:

This is a bug.

What is the expected behavior?

The two md-paginators to act separately from each other, and not return undefined when two or more are used on the same page.

What is the current behavior?

When I have 2 tables with pagination, the component says the md-paginator is undefined. When I comment out the second md-paginator everything works as expected.

What are the steps to reproduce?

Add 2 tables with pagination to one component.

What is the use-case or motivation for changing an existing behavior?

To allow a component to have multiple tables with pagination

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.3.6
Material 2.0.0-beta.10
OS Windows 10
Typescript 2.3.3

Is there anything else we should know?

I have tried assigning each md-paginator with different elementRefs and initializing the MdPaginator with each elementRef.

[willshowell]

Plunker? Are you using ViewChild or ViewChildren?

[DerekJDev]

ViewChild

[DerekJDev]

@ViewChild(MdPaginator) paginator: MdPaginator;
@ViewChild(MdPaginator) otherPaginator: MdPaginator;

[willshowell]

@ViewChild(MdPaginator) will return the first MdPaginator instance in the template (source). You should use different template reference variables or ViewChildren.

[DerekJDev]

Dang, rookie mistake on my part, I had forgot how to properly define a ViewChild. Thanks man!

[DerekJDev]

But if anyone else runs into this, the ViewChild should be defined like this:
@ViewChild('paginator') paginator: MdPaginator;
@ViewChild('otherPaginator') otherPaginator: MdPaginator;

And in the DOM:
<md-paginator #paginator [length]="firstTable.resultLength" [pageSize]="5" [pageIndex]="0" [pageSizeOptions]="[5, 10, 25, 100]"> </md-paginator>
<md-paginator #otherPaginator [length]="secondTable.resultLength" [pageSize]="5" [pageIndex]="0" [pageSizeOptions]="[5, 10, 25, 100]"> </md-paginator>

[vgrados2]

I want to show two pagination (mat-paginator) components for the same table (mat-table) component a top one, and a bottom one, since my users want to see at least 50 rows per page, and once they are at the end of the page, they want to try the next page right there, any ideas?

[dushkostanoeski]

@vgrados2 I ended up here with the same question but for a HTTP table and after a while I figured it out. Both paginators call the same function on page change, and from that function you emit an event that is called in the merge.

<mat-paginator #topPaginator [length]="resultsLength" [pageSize]="50" (page)="changePage($event)"></mat-paginator>
<mat-paginator #bottomPaginator [length]="resultsLength" [pageSize]="50" (page)="changePage($event)"></mat-paginator>

As you can see both are calling the same event.

 pageChanged = new EventEmitter<number>(); // the event emitter that that we'll use in the merge

changePage(event: PageEvent) { // update both page indexes so you have a consistent view
    this.topPaginator.pageIndex = event.pageIndex;
    this.bottomPaginator.pageIndex = event.pageIndex;
    this.pageChanged.emit(event.pageIndex);
}

merge(this.stavkiSort.sortChange, this.pageChanged) // we use the pageChanged event and not the paginators events
    .pipe(
        startWith({}),
        switchMap(() => {
            return this.dataService.getData(this.dataSort.active,
                                this.dataSort.direction,
                                this.topPaginator.pageIndex); // doesn't matter what page index is used because we updated them both
            }),
// the rest is the same
....

[gmeena]

@Derekjohnson277 your solution worked for me and I do have working multiple mat-paginator for single table. but it's not working with filtering. I am trying to do something like

applyFilter(filterValue: string) {
    debugger;
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches

    this.dataSource.filterPredicate =
      (data: IFUsApi, filter: string) => {
        let searchStr = (data.productNumbers + data.title + data.associatedProducts).toLowerCase();
        return searchStr.indexOf(filter.toLowerCase()) != -1;
      }
    this.dataSource.filter = filterValue;

    this.otherpaginator.pageIndex = this.paginator.pageIndex;
    this.otherpaginator.pageSize = this.paginator.pageSize;
    this.otherpaginator.length = this.paginator.length;
    this.pageChanged.emit(this.paginator.pageIndex);
}

Edit 1 - As of now i solved the problem using below code

setTimeout(() => {
      this.otherpaginator.pageIndex = this.paginator.pageIndex;
      this.otherpaginator.pageSize = this.paginator.pageSize;
      this.otherpaginator.length = this.paginator.length;
      this.pageChanged.emit(this.paginator.pageIndex);
    }, 100)

[apoorv-b]

@dushkostanoeski is it possible to provide the example on stackblitz for multiple paginations on a single table.

[Jonnykratz]

@dushkostanoeski nice, worked for me.

[joeshubi]

@dushkostanoeski is it possible to provide the example on stackblitz for multiple paginations on a single table.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}