如何自定义 ag-grid 分页答案

【问题标题】：How to customise ag-grid pagination如何自定义 ag-grid 分页
【发布时间】：2022-02-23 17:37:19
【问题描述】：

是否可以为 Angular 自定义 ag-grid 分页。附上自定义分页图片供参考。

<ag-grid-angular id="myGrid" style="width: 500px; height: 500px;" class="ag-theme-alpine"
 [rowData]="gridOptions.rowData"
    [columnDefs]="gridOptions.columnDefs" [pagination]="true"  [paginationPageSize]="paginationPageSize"
    (gridReady)="onGridReady($event)"  (cellClicked)="onCellClicked($event)"
    [defaultColDef]="defaultColDef" 
    [frameworkComponents]="frameworkComponents" [allowContextMenuWithControlKey]="true"
    [getContextMenuItems]="getContextMenuItems" >
</ag-grid-angular>


 onPageSizeChanged(event: any) {
    var value = event.target.value;
    this.gridApi.paginationSetPageSize(Number(value));
  }

【问题讨论】：

标签： pagination ag-grid

【解决方案1】：

要创建一个自定义的分页面板，你必须做以下两件事：

设置suppressPaginationPanel=true告诉网格不显示分页的默认控件，如documentation所示
创建一个Custom Status Bar Panel 以根据您的要求设计您的分页面板。请注意，这是一项企业功能，因此如果您拥有 AG Grid 许可证，您可以通过 Zendesk 联系团队以获得更多支持。

【讨论】：