angular-material - 如何在角 Material 中自定义 mat-paginator

标签 angular-material paginator

我想自定义 mat-paginator 。默认情况下,我得到这样的分页器,在下面的链接中给出
https://material.angular.io/components/paginator/overview .
但我想要如下图所示的分页。
我如何使用 来做到这一点垫分页器

enter image description here

任何人都可以帮我解决这个问题。

最佳答案

更新 08/20/2020

使用@uhamid 回答作为灵感,以及下面的几条评论,表明这实际上是可能的,我修改了我的第一次尝试以提供完整的解决方案。
虽然 Umair Hamid下面的示例是功能性的,它不包括所需的样式。它还利用了ngDoCheck这引入了递归类型行为,并可能引入性能问题。
我还重构了大部分逻辑以形成更完整的解决方案。
像这样使用它:<mat-paginator style-paginator showFirstLastButtons [showTotalPages]="3" [length]="7130" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"> </mat-paginator>提供页面按钮以显示为输入 [showTotalPages] ,如果未提供,则默认为 2
enter image description here

STACKBLITZ
https://stackblitz.com/edit/angular-wyx2ue-bw95ug?embed=1&file=app/style-paginator.directive.ts
修订的 STACKBLITZ 8/20/2020
https://stackblitz.com/edit/angular-8holwx?file=src/app/style-paginator.directive.ts

关于angular-material - 如何在角 Material 中自定义 mat-paginator,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53646259/

相关文章:

django - 如何访问 Django-CMS 插件中的请求对象?

angular - 背景图像 url 在我的 Angular 项目中不起作用

javascript - 显示带有公共(public)组件的 Mat-dialog

Angular 2 Material 2单选按钮默认选择

angular-material - 如何清除 md-select 中的值

angular - 测试 Angular Material 表正在呈现正确的数据

cakephp - 如何从 cakePHP 的 Controller 内设置分页器页面

frameworks - Phalcon分页器错误: Syntax error, unexpected EOF

django - 基于分页器类的 View 在 DJANGO 中不起作用