0

我尝试在 mat-table 中实现自定义分页，但是在使用上一个和下一个按钮导航时出现错误。使用页码的导航也无法正常工作。下一页按钮工作正常，但上一个按钮和页码不起作用。这是我的分页器的 HTML 代码片段。

<mat-table matTableFilter [exampleEntity]="filterEntity" [filterType]="filterType" [dataSource]="dataSource| paginate: {itemsPerPage: 15,currentPage: p, totalItems: dummydata.length}" matSort>

<pagination-template #p="paginationApi" (pageChange)="currentPage = $event;paginate(currentPage)">


  <div class="custom-pagination">
    <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
      <span (click)="p.previous()"><button class="prevBtn"><i class="fa fa-angle-left"></i></button>
      </span>
    </div>
    <div class="page-number" *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
      <span (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">{{ page.label }}</span>
      <div *ngIf="p.getCurrent() === page.value">
        <span>{{ page.label }}</span>
      </div>
    </div>
    <div class="pagination-next" [class.disabled]="p.isLastPage()">
      <span *ngIf="!p.isLastPage()" (click)="p.next()"> <button class="nextBtn"><i
            class="fa fa-angle-right"></i></button> </span>
    </div>
  </div>

</pagination-template>

这是我正在尝试构建的css代码：

.custom-pagination .page-number{
  display: inline-block;
  margin: 0px 10px;


}
.page-number{
  color: rgba(0, 0, 0, 0.3);
}
.custom-pagination{
  padding-top: 50px;
  margin-left: 900px;
  padding-bottom: 100px;
}

.page-number.current{
  background: #ffffff!important;
  color: #0295E5;
}

.page-number span{
  
  font-size: 15px;
  cursor:pointer;
}
.fa-angle-left{
  color: #038cd6;
}
.fa-angle-right{
  color: #038cd6;
}

.pagination-previous,.pagination-next{
  display: inline-block;
  font-weight: bold;
}
.nextBtn{
  height: 40px;
  width: 40px;
  border-radius: 10px;
  border-color: #00a6ff;
  background-color: transparent;
}
.prevBtn{
  height: 40px;
  width: 40px;
  border-radius: 10px;
  border-color: #00a6ff;
  background-color: transparent;
}

这是我用来分页到其他页面的分页函数的 ts 代码。

    ngOnInit(): void {
        this.filterEntity = new Users();
        this.filterType = MatTableFilter.ANYWHERE;
        this.dataSource = this.dummydata.slice(0,15);
    }
    size = 15;
    pageIndex = 0;
    paginate(event: any) {
    this.pageIndex=event;
    this.dataSource = this.dummydata.slice(event * this.size - this.size, event * this.size);
  }
4

0 回答 0