我想在“ p-table分页器”中显示“全部”作为选项

Question

我有一个质朴的p表，其中有[rowsPerPageOptions]="[10, 20, 30]"， 我还希望有一个选项，在单击时显示“全部”，它应该显示表中可用的整行。

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

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

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

预期：我将能够看到“全部”

请在此堆叠闪电中提供答案 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;
  }
}