在银栅分页中设置totalPages

Question

我在用银栅分页。

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

数据应该加载到事件onPaginationChanged上。

类似于：

 this.gridOptions.api.setTotalPages = 10

Answer 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);
}

这里的plnkr工作示例

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

Answer 2

我可以使用带有total number of pages的rowModelType: infinite行模型在ag网格中设置pagination: true，以达到同样的效果：

参见本例：https://www.ag-grid.com/javascript-grid-infinite-scrolling/#example-block-equal-page

这里的关键点是将lastRow设置为从服务器获得的页面的totalCount，并以这种方式将其传递到params.successCallback(rowsThisPage, lastRow);中，这样ag网格就可以预先知道页面总数，并显示分页控制中的总计数。

    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);
  }

Answer 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));
    },