在 Ag-grid 分页中设置 totalPages答案

【问题标题】：Setting totalPages in Ag-grid pagination在 Ag-grid 分页中设置 totalPages
【发布时间】：2018-09-26 15:06:43
【问题描述】：

我正在使用带有分页功能的 Ag-grid。

我正在寻找一种使用 count/pageSize 方式设置分页总页数的方法。

数据应该在事件 onPaginationChanged

上加载

类似：

 this.gridOptions.api.setTotalPages = 10

【问题讨论】：

能否请您详细解释一下您需要什么以及到目前为止您已经取得的成就。您的问题令人困惑。

标签： angular angular5 ag-grid

【解决方案1】：

没有直接的 api/参数来设置页数。但是您可以更改 paginationPageSize 以确保最多有 10 页。

假设您每页至少可以有 50 个。

var gridOptions = {
   ...
   pagination: true,
   paginationPageSize: 50,
   ...
};

那么你可能有一些设置数据的方法

setDataToGrid: function(data){
    //data is more than your what can be fit in 10 pages
    if(data.length > gridOptions.paginationPageSize * 10){
        gridOptions.paginationPageSize = Math.ceil(data.length/10);
    }
    gridOptions.api.setRowData(data);
}

working plnkr example here

注意：除非您有大量无法显示的行，否则总是分发到十页并不好。

【讨论】：

【解决方案2】：

我可以通过使用rowModelType: infinite 行模型和pagination: true 在ag-grid 中设置total number of pages 以达到相同的效果：

请参阅此示例：https://www.ag-grid.com/javascript-grid-infinite-scrolling/#example-block-equal-page

这里的关键是设置lastRow等于你从服务器获得的总页数并将它传递给params.successCallback(rowsThisPage, lastRow);这样ag-grid会提前知道总页数并在分页控件中显示总页数.


    const dataSource = {
        rowCount: null,
        getRows: function(params) {
          console.log(
            'asking for ' + params.startRow + ' to ' + params.endRow
          );
          let pageNum = Math.round(params.endRow / PAGE_SIZE);
          fetchPage(pageNum).then(page => {
            var rowsThisPage = page.entities;
            var lastRow = page.paging.totalCount;
            params.successCallback(rowsThisPage, lastRow);
          });
        }
    };
    params.api.setDatasource(dataSource);
  }

【讨论】：

【解决方案3】：

在 Vue js 中给出示例首先添加：-

 <v-select
              v-bind:items="pageSize"
              v-model="pageModel"
              label="PageSize"
              v-on:change="onPageSizeChanged(pageModel)"
              id="page-size"
              style="width:115px;max-height: 32px;text-align:right !important;  
              float: right;
              margin-right: 283px;
              margin-top:10px;"

            ></v-select>

然后添加方法

/** 使用页面大小来设置分页 */

 onPageSizeChanged(newPageSize) {
      this.gridApi.paginationSetPageSize(parseInt(newPageSize));
    },

【讨论】：