如何在角材料中自定义 mat-paginator [英] How to customize mat-paginator in angular material

问题描述

我想自定义 mat-paginator .默认情况下，我得到这样的分页器，在下面的链接中给出

谁能帮我解决这个问题.

解决方案

UPDATE 08/20/2020

---

使用@uhamid 回答作为灵感，以及下面的几条评论，表明这实际上是可能的，我修改了我的第一次尝试以提供完整的解决方案.

尽管下面的 Umair Hamid 示例是实用的，但它不包括所需的样式.它还利用了 ngDoCheck，它引入了递归类型行为并可能引入性能问题.

我还重构了大部分逻辑以形成更完整的解决方案.

像这样使用:

提供页面按钮以显示为输入[showTotalPages]，如果不提供则默认为2

---

---

STACKBLITZ

https://stackblitz.com/edit/angular-wyx2ue-bw95ug?embed=1&file=app/style-paginator.directive.ts

修订后的 STACKBLITZ 8/20/2020

https://stackblitz.com/编辑/angular-8holwx?file=src/app/style-paginator.directive.ts

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.

解决方案

UPDATE 08/20/2020

---

Using @uhamid answer as inspiration, along with several comments below, indicating this is in fact possible, I revised my first attempt to provide a complete solution.

Although Umair Hamid example below is functional, it did not include the styling required. It also leveraged ngDoCheck which introduces recursive type behavior and is likely to introduce performance issues.

I also refactored most of the logic to make for a more complete solution.

Use it like:

<mat-paginator style-paginator showFirstLastButtons [showTotalPages]="3" [length]="7130" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"> </mat-paginator>

Provide page buttons to display as input [showTotalPages], if not provided it will default to 2

---

---

STACKBLITZ

https://stackblitz.com/edit/angular-wyx2ue-bw95ug?embed=1&file=app/style-paginator.directive.ts

REVISED STACKBLITZ 8/20/2020

https://stackblitz.com/edit/angular-8holwx?file=src/app/style-paginator.directive.ts

这篇关于如何在角材料中自定义 mat-paginator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！