Angular Material mat-paginator 固定底部

Question

下午好，

我无法使用 DataTable 使用带有角度材料的固定分页器。我的意思是我只想滚动行。 我已经检查了https://material.angular.io/components/table/examples，但没有成功。这是我的代码：

component.html

    <mat-form-field class="table-form-input">
    <input type="text" matInput (keyup)="doFilter($event.target.value)" placeholder="Filter" >
  </mat-form-field>
<div class="table-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name</th>
      <td mat-cell *matCellDef="let element">{{element.name}} </td>
    </ng-container>

    <!-- Client id Column -->
    <ng-container matColumnDef="cli_id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Client ID </th>
      <td mat-cell *matCellDef="let element"> {{element.cli_id}} </td>
    </ng-container>

     <!-- EXT id Column -->
     <ng-container matColumnDef="ext_id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> EXT ID </th>
      <td mat-cell *matCellDef="let element"> {{element.ext_id}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="want_details">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Need details </th>
      <td mat-cell *matCellDef="let element" (click) = "rowClicked(element.ext_id)">
        <mat-radio-group>
          <mat-radio-button class="table-radio-button" *ngFor="let detail of detail_types" [value]="detail.id" [checked]= "detail.id === element.want_details">
            {{detail.name}}
          </mat-radio-button>
        </mat-radio-group> </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSize]="25"[pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
</div>

组件.ts

import { Component, OnInit, OnDestroy, ViewChild, AfterViewInit} from '@angular/core';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';
import { Subscription } from 'rxjs';
import { HomeSupportService } from './home-support.service';

@Component({
  selector: 'app-home-support',
  templateUrl: './home-support.component.html',
  styleUrls: ['./home-support.component.css']
})
export class HomeSupportComponent implements OnInit, AfterViewInit, OnDestroy {

  public displayedColumns: string[] = ['name', 'cli_id', 'ext_id', 'want_details'];
  public list_client;
  private list_clientSub: Subscription;
  public dataSource = new MatTableDataSource(this.list_client);
  public detail_types = [{id: 0, name: 'No'}, {id: 1, name: 'Short'}, {id: 2, name: 'Long'}];

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private homesupportservice: HomeSupportService) { }

  ngOnInit() {
    this.homesupportservice.getClientList();
    this.list_clientSub = this.homesupportservice.getClientListUpdatedSubject().subscribe(
      (list_client) => {
        this.list_client = list_client;
        this.dataSource.data = this.list_client;
      },
      (error) => {
        console.log(error);
      }
    );
    this.dataSource.paginator = this.paginator;
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.filterPredicate = (data:
      {name: string, cli_id: number, ext_id: number, want_details: string}, filter: string) => data.name.indexOf(filter) !== -1;
  }

  ngOnDestroy() {
    this.list_clientSub.unsubscribe();
  }

  doFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  rowClicked(row: any): void {
    console.log(row);
  }
}

组件.css

table {
    width: 100%;
  }

  th.mat-sort-header-sorted {
    color: black;
  }

  .table-container {
    margin: auto;
    width: 80%;
    max-height: 80%;
    overflow: auto;
  }

  .table-form-input{
    width: 80%;
    margin-left: 10%;
    margin-top: 20px;
  }

  .table-radio-button{
    padding-right: 5px;
    padding-left: 5px;
  }

我试图将溢出仅放在桌子上，但它不起作用。尝试了相对、绝对、固定等等......

如果有人有解决方案或文档，那就完美了！

非常感谢

Answer 1

根据材料 8.1

我们可以用 max-height 或 height CSS 属性将表格包裹在一个 div 中，并将 paninator 放在该 div 之外。

HTML 代码示例。

  <div class="mat-elevation-z2">
    <div class="table-container">

      <!--- List of column definitions here --->

      <table mat-table [dataSource]="dataSource" matSort>
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
    <mat-paginator [pageSize]="25" [pageSizeOptions]="[10, 15, 25, 100]"></mat-paginator>
  </div>

CSS

.table-container {
    max-height: calc(100vh - 155px); // or height:calc(100vh - 155px); depending on your need  change
    overflow: auto;
}

Answer 2

如果要将mat-paginator固定在页面底部（不是窗口底部，向下滚动时，可以使用此方法

.html

 <div class="footer">
 <mat-paginator fixed [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator> 
</div>

.css

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}

Answer 3

原因就在这里：

 .table-container {
    max-height: calc(100vh - 155px); // or height:calc(100vh - 155px); depending on your need  change
    overflow: auto; 
 }

Scroll 设置为表格的容器，这就是为什么它也应用于分页器的原因。试着像这样放在你的容器外面：

<div class="table-container">
   *your table...*
</div>

<mat-paginator></mat-paginator>

Answer 4

通过使用静态高度而不是相对高度来解决问题：

.table-container {
margin: auto;
width: 80%;
height: 400px; // change
overflow: auto;

}