How to customize mat-paginator in angular material

问题

I want to customize mat-paginator .By default i am getting paginator like this which have given in below link https://material.angular.io/components/paginator/overview. But i want pagination like below image . How can i do this using mat-paginator

Can anyone please help me with this.

回答1:

I thought this would be a good opportunity to see exactly how far I could go with directive DOM manipulation of a material library component... feel like I did pretty good but... I have come to the conclusion this will not be possible... it was a good learning experience none the less.

there may be others more experienced than I that could take this further, or possibly even comment on a better way.

but for my experience level with directives I believe this will not be possible via directive / DOM manipulation

I will spare you from going through all of my changes to produce this stackblitz and will get directly to why I believe this wont be possible.

Below are the 4 methods used by the paginator to traverse the array

firstPage()
previousPage()
nextPage()
lastPage()

https://github.com/angular/material2/blob/63be232283262615fa2130900c80dd570eff6cda/src/lib/paginator/paginator.html#L58

None of which will accept an index or value, making the ability to have buttons 1-6 in your screenshot impossible... as they in theory would only ever be able to use one of the 4 methods above.

I did manage to insert a button 3 to see if I could tap into one of these methods via the directive... as you can see it currently presents an alert when clicked.

I was not able to use one of the above methods, not exactly sure how to wire it up... or if that would even be possible.
In light of not being able to pass a value to these methods, and not able to figure out how to emit click event and wire it up to component method via Renderer2, I feel this will not be possible.

Stackblitz

https://stackblitz.com/edit/angular-wyx2ue?embed=1&file=app/paginator-overview-example.html

In Conclusion

As stated, this was a cool learning experience for me with directives... but I think branding the paginator in a way that will meet your requirements will not be possible and you should explore an alternative library to meet your requirements.

回答2:

Marshal is incorrect. You can set the pageIndex property of the material paginator https://material.angular.io/components/paginator/api#MatPaginator

I mimicked exactly what you were trying to do. Hard coded so you'll have to figure it out how to add buttons based on the number of pages but here you go.

<button mat-fab (click)="page.previousPage()"><</button>
          <button mat-fab (click)="page.pageIndex = 0">1</button>
          <button mat-fab (click)="page.pageIndex = 1">2</button>
          <button mat-fab (click)="page.pageIndex = 2">3</button>
          <button mat-fab (click)="page.nextPage()">></button>
          <mat-paginator style="visibility:hidden" #page [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

回答3:

You can find here my custom directive (StylePaginatorDirective) inspired by the answer provided by @Marshal but completely rewriten from scratch in order to shows the pagination inside the mat-paginator-range-label

Preview

Stackblitz

https://stackblitz.com/edit/angular-wyx2ue-ayitwa?file=app%2Fstyle-paginator.directive.ts

https://angular-wyx2ue-ayitwa.stackblitz.io

Positioning

Feel free to customize the ordering of your component with custom css class: https://stackoverflow.com/a/55969038/2835268

回答4:

Insert the buttons from mat-paginator I think it is not possible but you can create the custom pager:

paginator-configurable-example.html

  <button mat-button (click)="page.previousPage()"><</button>
  <button mat-button (click)="updateManualPage(1)" >1</button>
  <button mat-button (click)="updateManualPage(2)">2</button>
  <button mat-button (click)="updateManualPage(3)">3</button>
  <button mat-button (click)="page.nextPage()">></button>

  <mat-paginator style="visibility:hidden" [pageIndex]="pageIndex" #page [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" (page)="pageEvent = $event" ></mat-paginator>

<div *ngIf="pageEvent">
  <h5>Page Change Event Properties</h5>
  <div>List length: {{pageEvent.length}}</div>
  <div>Page size: {{pageEvent.pageSize}}</div>
  <div>Page index: {{pageEvent.pageIndex}}</div>
</div>

paginator-configurable-example.ts

import {Component} from '@angular/core';
import {PageEvent} from '@angular/material/paginator';

/**
 * @title Configurable paginator
 */
@Component({
  selector: 'paginator-configurable-example',
  templateUrl: 'paginator-configurable-example.html',
  styleUrls: ['paginator-configurable-example.css'],
})
export class PaginatorConfigurableExample {
  // MatPaginator Inputs
  length = 100;
  pageSize = 10;
  pageSizeOptions: number[] = [5, 10, 25, 100];
  manualPage = null;

  // MatPaginator Output
  pageEvent: PageEvent;

  setPageSizeOptions(setPageSizeOptionsInput: string) {
    this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
  }

  public updateManualPage(index: number): void {
    this.manualPage = index;
    this.pageEvent.pageIndex = index;
  }
  public clearManualPage(): void {
    this.manualPage = 0;
  }
}

来源：https://stackoverflow.com/questions/53646259/how-to-customize-mat-paginator-in-angular-material

标签

angular-material

paginator