我想在 primeng p-table paginator 中显示 "All" 作为一个选项

Question

我有一个 primeng p-table，我有 [rowsPerPageOptions]="[10, 20, 30]"，我还想要一个显示 'All' 的选项，点击它应该显示 table.

中可用的整行

我根据分页器组件文档进行了尝试。 [rowsPerPageOptions]="[10, 20, { showAll: All }]"

但这无济于事。 https://www.primefaces.org/primeng/#/paginator

[rowsPerPageOptions]="[10, 20, { showAll: All }]"

预计：我应该能看到'All'

请在此 stackblitz 中提供答案 https://stackblitz.com/edit/github-vmghz6-ytjegc?file=src/app/app.component.html

Answer 1

您只是遗漏了 'All':

周围的引号

[rowsPerPageOptions]="[10, 20, { showAll: 'All' }]"

Answer 2

我发现的一种方法是： [rowsPerPageOptions]="[10, 20, records.length]"

.ui-paginator .ui-dropdown .ui-dropdown-panel ul li:last-child {
  span::before {
    content: "All";
    visibility: visible;
  }
  span::after {
    content: "";
  }
  span {
    visibility: hidden;
  }

    }

Answer 3

这是最正确的答案，所有下拉项的显示值都为 :ALL，我不得不对样式进行一些改动来解决这个问题。这是最终更正的样式：

.ui-paginator {
  border: 0 none;
  padding: 1em;

  .ui-dropdown {
    float: left;

    .ui-dropdown-panel {
      ul {
        p-dropdownItem:last-child > li {
          &:last-child {
            span::before {
              content: "All";
              visibility: visible;
            }

            span::after {
              content: "";
            }

            span {
              visibility: hidden;
            }
          }
        }
      }
    }
  }

  .ui-paginator-current {
    float: right;
  }
}

Answer 4

@Anmol Jain 用最新版本的 prime ng 和组件 scss 回答。

::ng-deep .p-paginator {
  border: 0 none;
  padding: 1em;
  .p-dropdown {
    float: left;
    .p-dropdown-panel {
      ul {
        p-dropdownItem:last-child > li {
          &:last-child {
            span::before {
              content: "All";
              visibility: visible;
            }

            span::after {
              content: "";
            }

            span {
              visibility: hidden;
            }
          }
        }
      }
    }
  }

  .p-paginator-current {
    float: right;
  }
}

Answer 5

对我来说，我想把所有的都放在最后，当我看到 primeng 的 source control 时，他们把所有的都放在最上面，所以不得不使用自定义模板来完成它

<p-table 
    [value]="products"
    [rows]="productsTable.rows"  
    [paginator]="true"
    [rowsPerPageOptions]="[ 5, 10, 20, 50, 100, 200, products?.length]" 

<ng-template let-item pTemplate="paginatordropdownitem">
      {{ item.value === products?.length ? 'All' : item.value }}
 </ng-template>

我想在 primeng p-table paginator 中显示 "All" 作为一个选项

I want to show "All" as an option in primeng p-table paginator

paginator

primeng

angular