javascript - multiple angular material table in single page pagination issue - Stack Overflow

admin管理员组

文章数量:1356294

i am using angular two material table in single html page. first table, data loaded well with proper pagination. but in second table, all data loading without pagination. i added pagination functionally to both pages. i would like to show some part of code regarding this.

table 1 pagination (working well)

 <mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

table 2 pagination (pagination not working)

  <mat-paginator #errorpaginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>

my ponent file

import { Component, OnInit, ViewChild, Input, Inject} from '@angular/core';
import { from } from 'rxjs/internal/observable/from';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { DataSource } from '@angular/cdk/collections';
import { arInvoiceHeaderService} from './ar-invoice-header.service';
import { arInvoiceHeaderModel, arInvoiceHeader } from './ar-invoice-header-model';
import { MatSort, MatSortable, MatPaginator,MatTable, MatTableDataSource } from '@angular/material';
import { Injectable } from '@angular/core';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {animate, state, style, transition, trigger} from '@angular/animations';
import { FormControl } from '@angular/forms';
import { arErrorModel } from './ar-error-model';
import { MatPaginatorModule } from '@angular/material';
@Component({
  selector: 'app-ar-invoice-header',
  templateUrl: './ar-invoice-headerponent.html',
  animations: [
    trigger('detailExpand', [
      state('collapsed, void', style({height: '0px', minHeight: '0', display: 'none'})),
      state('expanded', style({height: '*'})),
      transition('* <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
  styleUrls: ['./ar-invoice-headerponent.css']
})
@Injectable()
export class ArInvoiceHeaderComponent implements OnInit {
  @ViewChild(MatSort) sort: MatSort;
  //@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild('paginator') paginator: MatPaginator;
@ViewChild('errorpaginator') errorpaginator: MatPaginator;
 @ViewChild(MatTable) table: MatTable<any>;
 
  isLoading = true;
  noGridData: boolean = false;
  dataSource = new MatTableDataSource(this.dataSource);
  errordataSource = new MatTableDataSource(this.errordataSource);
  //dataSource;
  //errordataSource;
  expandedElement: arInvoiceHeader;
  displayedColumns = ['id','invoiceNumber','status','orgName','setOfBooks','transactionSource','transactionType','errorCodeH','invoiceTotal','lineCount','interfaceFileLineNo','interfaceFileName','interfaceFilePath','createdBy','creationTimestamp'];
  errordisplayedColumns = ['id','invoiceNumber','lineNumber','interfaceFileName','interfaceFilePath','errorDescription'];


  constructor(private arinvoiceheaderService: arInvoiceHeaderService) {

   }

  ngOnInit() { 

    this.reloadList();
    this.arErrorList();
  }




//First table data loading function (currently working well with pagination )
  reloadList() {
    this.arinvoiceheaderService.getArInvoiceHeader().subscribe(results => {
      console.log(results);
      if (!results) {
       // return;
       alert("ERRor");
      }
    
      this.dataSource = new MatTableDataSource(results['ArInvoiceHeaders']);
      if(results.ArInvoiceHeaders.length > 0)
      {
       
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.isLoading = false;
        this.noGridData = false;
      }
      else{
        this.noGridData = true;
        this.isLoading = false;
      }
      
    });
  }

//seconf table data loading function (all data loading without pagination)
  arErrorList(){
    this.arinvoiceheaderService.getArErrorDetails().subscribe(results => {
      console.log(results);
      if (!results) {
        return;
      }
      this.errordataSource = new MatTableDataSource(results['ArInterfaceErrors']);

      this.errordataSource.errorpaginator = this.errorpaginator;
      this.errordataSource.sort = this.sort;


    });
  }
}

i am using angular two material table in single html page. first table, data loaded well with proper pagination. but in second table, all data loading without pagination. i added pagination functionally to both pages. i would like to show some part of code regarding this.

table 1 pagination (working well)

 <mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

table 2 pagination (pagination not working)

  <mat-paginator #errorpaginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>

my ponent file

import { Component, OnInit, ViewChild, Input, Inject} from '@angular/core';
import { from } from 'rxjs/internal/observable/from';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { DataSource } from '@angular/cdk/collections';
import { arInvoiceHeaderService} from './ar-invoice-header.service';
import { arInvoiceHeaderModel, arInvoiceHeader } from './ar-invoice-header-model';
import { MatSort, MatSortable, MatPaginator,MatTable, MatTableDataSource } from '@angular/material';
import { Injectable } from '@angular/core';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {animate, state, style, transition, trigger} from '@angular/animations';
import { FormControl } from '@angular/forms';
import { arErrorModel } from './ar-error-model';
import { MatPaginatorModule } from '@angular/material';
@Component({
  selector: 'app-ar-invoice-header',
  templateUrl: './ar-invoice-header.ponent.html',
  animations: [
    trigger('detailExpand', [
      state('collapsed, void', style({height: '0px', minHeight: '0', display: 'none'})),
      state('expanded', style({height: '*'})),
      transition('* <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
  styleUrls: ['./ar-invoice-header.ponent.css']
})
@Injectable()
export class ArInvoiceHeaderComponent implements OnInit {
  @ViewChild(MatSort) sort: MatSort;
  //@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild('paginator') paginator: MatPaginator;
@ViewChild('errorpaginator') errorpaginator: MatPaginator;
 @ViewChild(MatTable) table: MatTable<any>;
 
  isLoading = true;
  noGridData: boolean = false;
  dataSource = new MatTableDataSource(this.dataSource);
  errordataSource = new MatTableDataSource(this.errordataSource);
  //dataSource;
  //errordataSource;
  expandedElement: arInvoiceHeader;
  displayedColumns = ['id','invoiceNumber','status','orgName','setOfBooks','transactionSource','transactionType','errorCodeH','invoiceTotal','lineCount','interfaceFileLineNo','interfaceFileName','interfaceFilePath','createdBy','creationTimestamp'];
  errordisplayedColumns = ['id','invoiceNumber','lineNumber','interfaceFileName','interfaceFilePath','errorDescription'];


  constructor(private arinvoiceheaderService: arInvoiceHeaderService) {

   }

  ngOnInit() { 

    this.reloadList();
    this.arErrorList();
  }




//First table data loading function (currently working well with pagination )
  reloadList() {
    this.arinvoiceheaderService.getArInvoiceHeader().subscribe(results => {
      console.log(results);
      if (!results) {
       // return;
       alert("ERRor");
      }
    
      this.dataSource = new MatTableDataSource(results['ArInvoiceHeaders']);
      if(results.ArInvoiceHeaders.length > 0)
      {
       
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.isLoading = false;
        this.noGridData = false;
      }
      else{
        this.noGridData = true;
        this.isLoading = false;
      }
      
    });
  }

//seconf table data loading function (all data loading without pagination)
  arErrorList(){
    this.arinvoiceheaderService.getArErrorDetails().subscribe(results => {
      console.log(results);
      if (!results) {
        return;
      }
      this.errordataSource = new MatTableDataSource(results['ArInterfaceErrors']);

      this.errordataSource.errorpaginator = this.errorpaginator;
      this.errordataSource.sort = this.sort;


    });
  }
}

can you help me to sort out second table pagination issue.

• javascript
• angular
• angular-material

Share Improve this question Follow asked Dec 19, 2018 at 5:19 kumarakumara 93744 gold badges2323 silver badges4646 bronze badges 4

• Can you create stackblitz link with sample data? – Just code Commented Dec 19, 2018 at 5:22
• is it difficult to find issue from this ? – kumara Commented Dec 19, 2018 at 5:55
• HTML is missing from your question, also it will be easy to find the problem from stackblitz. – Just code Commented Dec 19, 2018 at 6:03
• One thing that is definitely wrong is this: this.errordataSource.errorpaginator = this.errorpaginator;, it should read this.errordataSource.paginator = this.errorpaginator;. I assume when refactoring the variable you accidentally changed this property too. – Fabian Küng Commented Dec 19, 2018 at 6:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

multiple angular material table workd for me...

Table 1 pagination

 <mat-paginator [pageSize]="10" [pageSizeOptions]="[3, 5, 10]" 
  [showFirstLastButtons]="true"></mat-paginator>

Table 2 pagination

   <mat-paginator [pageSize]="10" #paginatorlist [pageSizeOptions]="[3, 5, 10]"  
    [showFirstLastButtons]="true"></mat-paginator>

TS: The change detector looks for the first element..So we can use property .. read - True to read a different token from the queried elements.

    @ViewChild('paginatorlist', { read: MatPaginator }) paginatorlist: MatPaginator;
    @ViewChild(MatPaginator) paginator: MatPaginator;

As posted in the ment this line of code here this.errordataSource.errorpaginator = this.errorpaginator; is wrong, there is no errorpaginator property on the datasource. It should be this.errordataSource.paginator = this.errorpaginator;.

See a stackblitz here, if you unment the wrong line of code and ment the correct one you can see that it doesn't work with your code, but with the correct one it does.

**Table 1**

<mat-paginator [pageSizeOptions]="[5, 10, 15, 20]" showFirstLastButtons>
</mat-paginator>

**Table 2**
<mat-paginator #modulePaginatpr [pageSizeOptions]="[5, 10, 15, 20]" showFirstLastButtons></mat-paginator>

**ponenet.ts**
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild('modulePaginatpr') modulePaginatpr: MatPaginator;

For table1 (datasoure is sourse name in table 1 html code) this.dataSource.paginator = this.paginator;

For table2 (datasoure2 is sourse name in table 2 html code)
this.dataSource2.paginator = this.modulePaginatpr;

本文标签： javascriptmultiple angular material table in single page pagination issueStack Overflow