如何使用材料角的分页器?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用材料角的分页器?相关的知识,希望对你有一定的参考价值。

我是角色的新手,并试图在我的应用程序中实现分页。我正在尝试使用this material component.

使用下面的代码,我可以在我的length文件中获取pagesizepageSizeOptions.ts

<md-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
</md-paginator>
export class PaginatorConfigurableExample {

  length = 100;
  pageSize = 10;
  pageSizeOptions = [5, 10, 25, 100];

  }
}

但是,当页面被更改时,我似乎无法触发更改上表中数据的功能。另外,我如何使用nextPagepreviousPagehasNextPagehasPreviousPage方法?

答案

我在这里苦苦挣扎。但我可以告诉你我做了一些研究。基本上,您首先开始在foo.template.ts中添加页面@Output事件:

 <md-paginator #paginator
                [length]="length"
                [pageIndex]="pageIndex"
                [pageSize]="pageSize"
                [pageSizeOptions]="[5, 10, 25, 100]"
                (page)="pageEvent = getServerData($event)"
                >
 </md-paginator>

之后,您必须在foo.component.ts类和其他类中添加pageEvent属性来处理分页器要求:

pageEvent: PageEvent;
datasource: null;
pageIndex:number;
pageSize:number;
length:number;

并添加将获取服务器数据的方法:

ngOnInit() {
   getServerData(null) ...
}

public getServerData(event?:PageEvent){
  this.fooService.getdata(event).subscribe(
    response =>{
      if(response.error) {
        // handle error
      } else {
        this.datasource = response.data;
        this.pageIndex = response.pageIndex;
        this.pageSize = response.pageSize;
        this.length = response.length;
      }
    },
    error =>{
      // handle error
    }
  );
  return event;
}

因此,基本上每次单击paginator时,都会激活getServerData(..)方法,该方法将调用foo.service.ts获取所需的所有数据。在这种情况下,您不需要处理nextPage和nextXXX事件,因为它将在视图呈现时自动计算。

希望这可以帮到你。如果你有成功,请告诉我。 =]

另一答案

嘿所以我偶然发现了它,并使它工作,这是如何:

在我的component.html

<mat-paginator #paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize"
    [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>

在我的组件里面

public array: any;
public displayedColumns = ['', '', '', '', ''];
public dataSource: any;    

public pageSize = 10;
public currentPage = 0;
public totalSize = 0;

@ViewChild(MatPaginator) paginator: MatPaginator;

constructor(private app: AppService) { }

ngOnInit() {
  this.getArray();
}

public handlePage(e: any) {
  this.currentPage = e.pageIndex;
  this.pageSize = e.pageSize;
  this.iterator();
}

private getArray() {
  this.app.getDeliveries()
    .subscribe((response) => {
      this.dataSource = new MatTableDataSource<Element>(response);
      this.dataSource.paginator = this.paginator;
      this.array = response;
      this.totalSize = this.array.length;
      this.iterator();
    });
}

private iterator() {
  const end = (this.currentPage + 1) * this.pageSize;
  const start = this.currentPage * this.pageSize;
  const part = this.array.slice(start, end);
  this.dataSource = part;
}

所有的分页工作都是在iterator方法中完成的。这个方法解决了skiptake并将其分配给材料表的dataSource

另一答案

使用Slice Pipe将Angular Paginator与数据表链接的另一种方法。这些数据仅从服务器获取一次。

视图:

 <div class="col-md-3" *ngFor="let productObj of productListData | 
     slice: lowValue : highValue">
       //actual data dispaly  
 </div>

<mat-paginator [length]="productListData.length" [pageSize]="pageSize" 
   (page)="pageEvent = getPaginatorData($event)">
</mat-paginator> 

零件

    pageIndex:number = 0;
    pageSize:number = 50;
    lowValue:number = 0;
    highValue:number = 50;       

  getPaginatorData(event){
     console.log(event);
     if(event.pageIndex === this.pageIndex + 1){
        this.lowValue = this.lowValue + this.pageSize;
        this.highValue =  this.highValue + this.pageSize;
       }
    else if(event.pageIndex === this.pageIndex - 1){
       this.lowValue = this.lowValue - this.pageSize;
       this.highValue =  this.highValue - this.pageSize;
      }   
       this.pageIndex = event.pageIndex;
 }
另一答案

原始问题中的问题是您没有捕获“页面”事件,要解决此问题,您需要在md-paginator标记中添加(page)='yourEventHandler($event)'作为属性。

检查一个工作示例here

您还可以查看API文档here

另一答案

零件:

import { Component,  AfterViewInit, ViewChild } from @angular/core;
import { MatPaginator } from @angular/material;

export class ClassName implements AfterViewInit {
    @ViewChild(MatPaginator) paginator: MatPaginator;
    length = 1000;
    pageSize = 10;
    pageSizeOptions: number[] = [5, 10, 25, 100];

    ngAfterViewInit() {
        this.paginator.page.subscribe(
           (event) => console.log(event)
    );
}

HTML

<mat-paginator 
   [length]="length"
   [pageSize]="pageSize" 
   [pageSizeOptions]="pageSizeOptions"
   [showFirstLastButtons]="true">
</mat-paginator>
另一答案

花了几个小时后,我认为这是应用分页的最佳方式。更重要的是它有效。这是我的分页器代码<mat-paginator #paginatoR [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">

在我的组件@ViewChild(MatPaginator) paginator: MatPaginator;内部查看子项,最后你必须将paginator绑定到表dataSource,这是怎么做的ngAfterViewInit() {this.dataSource.paginator = this.paginator;} Easy对吗?如果它适合你,那么将其标记为答案。

以上是关于如何使用材料角的分页器?的主要内容,如果未能解决你的问题,请参考以下文章

如何从材料角度使用分页器?

如何解决 JQgrid 中的分页器显示

django中的分页器

vue中使用Swiper插件怎么修改他的分页器样式

react 分页器 基于react-virtualized组件的分页器

Django—分页器与form组件