自定义垫子分页器答案

【问题标题】：Customizing mat paginator自定义垫子分页器
【发布时间】：2021-11-04 09:16:25
【问题描述】：

我正在尝试构建一个包含大量数据项的列表页面，因此我使用 mat-paginator 以简化阅读。我尝试在 mat-paginator 中自定义样式，但我无能为力。现在我的分页器看起来像这样。enter image description here 我想让它看起来像这样。 enter image description here

我当前的分页器 CSS 代码是：

.mat-paginator-page-size{
      display: none !important;
}
.mat-paginator-range-label{
      display: none !important;
}

.mat-icon-button{
      border-radius: none;
      background-color: #00a6ff;
      height: 40px;
      width: 40px;
}

【问题讨论】：

标签： angular pagination

【解决方案1】：

可以在组件 HTML 文件中自定义 mat-paginator。

看看下面的例子；

  <mat-paginator #paginator
    [length]=result.count
    [pageSize]=result.pageSize
    [pageSizeOptions]="[5, 10, 20, 50, 100]"
    [pageIndex]=result.page
    (page)="getNextPage($event)"
    [showFirstLastButtons]="true">
  </mat-paginator>

我们可以提供页面大小的块，显示特定的分页按钮等等。

您可以通过此链接 https://material.angular.io/components/paginator/api 阅读有关其 API 文档的更多信息

这里还有 Stackblitz 上的可配置分页示例，您可以尝试一下 https://stackblitz.com/angular/ngdejmepgbr?file=app/paginator-configurable-example.html

【讨论】：

【解决方案2】：

你可以通过使用这个类来给予

.mat-icon-button { 边框：纯蓝色！重要；边框半径：5px！重要； }

在Angular Style.css是主CSS文件的情况下，把它放在主CSS文件中。

【讨论】：

谢谢你的作品。但是我怎样才能显示可点击的页码列表，就像图片中的一样。
@GaneshGoel 你能解释一下我没有得到你的问题吗？
您能否解释一下如何在分页器选项卡中添加页码，例如如果有 10 页，那么它将在上一个和下一个按钮之间显示每个页码 1 到 10，就像这张图片中的一样i.stack.imgur.com/3Pbkg.png。此外，当我点击页码时，它会直接将我带到该页面。