te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Angular - Mat Paginator : Multiple Tables in a component - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Angular - Mat Paginator : Multiple Tables in a component - Stack Overflow

    javascript - Angular - Mat Paginator : Multiple Tables in a component - Stack Overflow

    programmeradmin4浏览0评论

    I am stuck on an issue for a while now, searched for solution but, unfortunately, nothing is working.

    I am rendering 5 tables on the screen. The table data is fetched using a GET call. The tables are getting rendered without an issue but I am unable to implement pagination on them. The pagination controls work fine but the table data is not updated. I can see the total elements in the array and i can move around with the direction key, change the page size but it has no effect on table. The table is stuck on the five records.

    Here is my .ts file

      @ViewChild(MatPaginator) paginatorLegal: MatPaginator;
  @ViewChild(MatPaginator) paginatorGSTN: MatPaginator;
  @ViewChild(MatPaginator) paginatorPHYS: MatPaginator;
  @ViewChild(MatPaginator) paginatorLink: MatPaginator;
  // @ViewChild(MatPaginator, {read: true}) paginatorLink: MatPaginator;
  @ViewChild(MatPaginator) paginatorAlias: MatPaginator;

  ORGANIZATION_LINK //I removed it from Datasource object to see if it will somehow fix the issue.

  DATASOURCES = {
    LEGAL_ADDRESS: <any>[],
    TELECOM_ADDRESS: <any>[],
    GSTN_ADDRESS: <any>[],
    PHYSICAL_ADDRESS: <any>[],
    ORGANIZATION_ALIAS: <any>[]
  }


  ngOnInit() {
    // thisanizationData.push(this.data['dataKey'])
    this.cust_serviceanizationToViewOrg.subscribe(data => {
      thisanizationData = data
      this.legalAddressTableCreation(data[0].legalAddress)
      this.fetchTABLES();
    })
}


  fetchORGLINK() {
    this.cust_service.getOrgLink(thisanizationData[0]['orgNumber'], resp => {
      if (resp['data']['allOrganizationLinkList'].length > 0) {
        this.ORGANIZATION_LINK = new MatTableDataSource(resp['data']['allOrganizationLinkList'])
        // this.ORGANIZATION_LINK.paginatorLink = this.paginatorLink
        setTimeout(() => this.ORGANIZATION_LINK.paginator = this.paginatorLink);

      }
      else {
        thisLinkNull = true;
      }
    },
      err => {
        thisLinkNull = true;
      }
    );
  }


  fetchORGALIAS() {
    this.cust_service.getOrgAliasFn(thisanizationData[0]['orgNumber'], resp => {
      if (resp['data']['allOrganizationAliasList'].length > 0) {
        this.DATASOURCES.ORGANIZATION_ALIAS = new MatTableDataSource(resp['data']['allOrganizationAliasList'])
        setTimeout(() => { this.DATASOURCES.ORGANIZATION_ALIAS.paginator = this.paginatorAlias });
      }
      else {
        thisAliasNull = true;
      }
    },
      err => {
        thisAliasNull = true;
      })
  }


  fetchTABLES() {
    this.fetchGSTN(); // same implementation as fetch org link or fetch alias
    this.fetchPHYSICAL(); //same implementation as fetch org link or fetch alias
    this.fetchORGLINK();
    this.fetchORGALIAS();
  }

    the HTML looks like

      <div class="card">
    <div class="card-header">
        <b>Legal Address</b>
    </div>
      
    <div class="card-body">

      <div class="table" *ngIf="!GSTN_null">
        <div class="searchPagination">
          <mat-paginator #paginatorLegal [length]="this.DATASOURCES.LEGAL_ADDRESS?.filteredData?.length" [pageSize]="5"
            [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.DATASOURCES.LEGAL_ADDRESS" class="mat-table_">

          //data
        </mat-table>
      </div>

      <div class="noRecords" *ngIf='GSTN_null'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <b>GSTN Address</b>
    </div>

    <div class="card-body">

      <div class="table" *ngIf="!GSTN_null">
        <div class="searchPagination">
          <mat-paginator #paginatorGSTN [length]="this.DATASOURCES.GSTN_ADDRESS?.filteredData?.length" [pageSize]="5"
            [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.DATASOURCES.GSTN_ADDRESS" class="mat-table_">

          //data
        </mat-table>
      </div>

      <div class="noRecords" *ngIf='GSTN_null'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

  <div class="card">
    <div class="card-header">
        <b>Physical Address</b>
    </div>
        

    <div class="card-body">

      <div class="table" *ngIf="!physicalNull">

        <div class="searchPagination">
          <mat-paginator #paginatorPHYS [length]="this.DATASOURCES.PHYSICAL_ADDRESS?.filteredData?.length" [pageSize]="5"
            [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.DATASOURCES.PHYSICAL_ADDRESS" class="mat-table_">

          //data
        </mat-table>
      </div>

      <div class="noRecords" *ngIf='physicalNull'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <b>Organization Link</b>
    </div>

    <div class="card-body">

      <div class="table" *ngIf="!orgLinkNull">

        <div class="searchPagination">
          <mat-paginator #paginatorLink [length]="this.ORGANIZATION_LINK?.filteredData?.length" [pageSize]="5"
            [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.ORGANIZATION_LINK" class="mat-table_">
    //data
        </mat-table>
      </div>

      <div class="noRecords" *ngIf='orgLinkNull'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

  <div class="card">
    <div class="card-header"><b>Organization Alias</b></div>
        

    <div class="card-body">

      <div class="table" *ngIf="!orgAliasNull">

        <div class="searchPagination">
          <mat-paginator #paginatorAlias [length]="this.DATASOURCES.ORGANIZATION_ALIAS?.filteredData?.length"
            [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.DATASOURCES.ORGANIZATION_ALIAS" class="mat-table_">
//data
        </mat-table>
      </div>

      <div class="noRecords" *ngIf='orgAliasNull'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

    Is there something that I am missing (Been working for 12 hours straight), a typo or something? Or is there another way to tackle this issue and making the pagination work on the tables.

    I am stuck on an issue for a while now, searched for solution but, unfortunately, nothing is working.

    I am rendering 5 tables on the screen. The table data is fetched using a GET call. The tables are getting rendered without an issue but I am unable to implement pagination on them. The pagination controls work fine but the table data is not updated. I can see the total elements in the array and i can move around with the direction key, change the page size but it has no effect on table. The table is stuck on the five records.

    Here is my .ts file

      @ViewChild(MatPaginator) paginatorLegal: MatPaginator;
  @ViewChild(MatPaginator) paginatorGSTN: MatPaginator;
  @ViewChild(MatPaginator) paginatorPHYS: MatPaginator;
  @ViewChild(MatPaginator) paginatorLink: MatPaginator;
  // @ViewChild(MatPaginator, {read: true}) paginatorLink: MatPaginator;
  @ViewChild(MatPaginator) paginatorAlias: MatPaginator;

  ORGANIZATION_LINK //I removed it from Datasource object to see if it will somehow fix the issue.

  DATASOURCES = {
    LEGAL_ADDRESS: <any>[],
    TELECOM_ADDRESS: <any>[],
    GSTN_ADDRESS: <any>[],
    PHYSICAL_ADDRESS: <any>[],
    ORGANIZATION_ALIAS: <any>[]
  }


  ngOnInit() {
    // thisanizationData.push(this.data['dataKey'])
    this.cust_serviceanizationToViewOrg.subscribe(data => {
      thisanizationData = data
      this.legalAddressTableCreation(data[0].legalAddress)
      this.fetchTABLES();
    })
}


  fetchORGLINK() {
    this.cust_service.getOrgLink(thisanizationData[0]['orgNumber'], resp => {
      if (resp['data']['allOrganizationLinkList'].length > 0) {
        this.ORGANIZATION_LINK = new MatTableDataSource(resp['data']['allOrganizationLinkList'])
        // this.ORGANIZATION_LINK.paginatorLink = this.paginatorLink
        setTimeout(() => this.ORGANIZATION_LINK.paginator = this.paginatorLink);

      }
      else {
        thisLinkNull = true;
      }
    },
      err => {
        thisLinkNull = true;
      }
    );
  }


  fetchORGALIAS() {
    this.cust_service.getOrgAliasFn(thisanizationData[0]['orgNumber'], resp => {
      if (resp['data']['allOrganizationAliasList'].length > 0) {
        this.DATASOURCES.ORGANIZATION_ALIAS = new MatTableDataSource(resp['data']['allOrganizationAliasList'])
        setTimeout(() => { this.DATASOURCES.ORGANIZATION_ALIAS.paginator = this.paginatorAlias });
      }
      else {
        thisAliasNull = true;
      }
    },
      err => {
        thisAliasNull = true;
      })
  }


  fetchTABLES() {
    this.fetchGSTN(); // same implementation as fetch org link or fetch alias
    this.fetchPHYSICAL(); //same implementation as fetch org link or fetch alias
    this.fetchORGLINK();
    this.fetchORGALIAS();
  }

    the HTML looks like

      <div class="card">
    <div class="card-header">
        <b>Legal Address</b>
    </div>
      
    <div class="card-body">

      <div class="table" *ngIf="!GSTN_null">
        <div class="searchPagination">
          <mat-paginator #paginatorLegal [length]="this.DATASOURCES.LEGAL_ADDRESS?.filteredData?.length" [pageSize]="5"
            [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.DATASOURCES.LEGAL_ADDRESS" class="mat-table_">

          //data
        </mat-table>
      </div>

      <div class="noRecords" *ngIf='GSTN_null'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <b>GSTN Address</b>
    </div>

    <div class="card-body">

      <div class="table" *ngIf="!GSTN_null">
        <div class="searchPagination">
          <mat-paginator #paginatorGSTN [length]="this.DATASOURCES.GSTN_ADDRESS?.filteredData?.length" [pageSize]="5"
            [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.DATASOURCES.GSTN_ADDRESS" class="mat-table_">

          //data
        </mat-table>
      </div>

      <div class="noRecords" *ngIf='GSTN_null'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

  <div class="card">
    <div class="card-header">
        <b>Physical Address</b>
    </div>
        

    <div class="card-body">

      <div class="table" *ngIf="!physicalNull">

        <div class="searchPagination">
          <mat-paginator #paginatorPHYS [length]="this.DATASOURCES.PHYSICAL_ADDRESS?.filteredData?.length" [pageSize]="5"
            [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.DATASOURCES.PHYSICAL_ADDRESS" class="mat-table_">

          //data
        </mat-table>
      </div>

      <div class="noRecords" *ngIf='physicalNull'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <b>Organization Link</b>
    </div>

    <div class="card-body">

      <div class="table" *ngIf="!orgLinkNull">

        <div class="searchPagination">
          <mat-paginator #paginatorLink [length]="this.ORGANIZATION_LINK?.filteredData?.length" [pageSize]="5"
            [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.ORGANIZATION_LINK" class="mat-table_">
    //data
        </mat-table>
      </div>

      <div class="noRecords" *ngIf='orgLinkNull'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

  <div class="card">
    <div class="card-header"><b>Organization Alias</b></div>
        

    <div class="card-body">

      <div class="table" *ngIf="!orgAliasNull">

        <div class="searchPagination">
          <mat-paginator #paginatorAlias [length]="this.DATASOURCES.ORGANIZATION_ALIAS?.filteredData?.length"
            [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>
        </div>

        <mat-table [dataSource]="this.DATASOURCES.ORGANIZATION_ALIAS" class="mat-table_">
//data
        </mat-table>
      </div>

      <div class="noRecords" *ngIf='orgAliasNull'>
        <b>No Records Found....</b>
      </div>

    </div>
  </div>

    Is there something that I am missing (Been working for 12 hours straight), a typo or something? Or is there another way to tackle this issue and making the pagination work on the tables.

    • javascript
    • html
    • angular
    • angular-material
    Share Improve this question edited Feb 10, 2022 at 19:01 VLAZ 29.1k9 gold badges62 silver badges84 bronze badges asked Feb 10, 2022 at 18:18 MenimEMenimE 3041 gold badge7 silver badges18 bronze badges 1
    • 1 You need use #paginatorLegal="matPaginator" and @ViewChild('paginatorLegal'). see e.g. stackoverflow./questions/62529570/… – Eliseo Commented Feb 10, 2022 at 19:06
    Add a ment  | 

    1 Answer 1

    Reset to default 14

    First tell your ponent the alias of the matPaginator which you are going to bind in the HTML.

    For Example in your HTML it should be like this:

     <mat-paginator #paginatorLegal="matPaginator"
 [length]="this.DATASOURCES.LEGAL_ADDRESS?.filteredData?.length" [pageSize]="5"
 [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>

     <mat-paginator #paginatorGSTN="matPaginator"
 [length]="this.DATASOURCES.GSTN_ADDRESS?.filteredData?.length" [pageSize]="5"
 [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>

    And then bind to them in your .ts ponent using ViewChild alias property

     @ViewChild('paginatorLegal') paginatorLegal: MatPaginator;
 @ViewChild('paginatorGSTN') paginatorGSTN: MatPaginator;

    and then finally when you get the data you should bind the paginators where the respective MatTableDataSource which you already did in the subscribe code.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论