CODEWITHSUNDEEP
angularangular5ag-grid
Anurag Upadhyaya
Anurag Upadhyaya

Reputation: 331

Setting totalPages in Ag-grid pagination

I am using Ag-grid with pagination.

I am looking for a way to set the total number of pages for pagination with the count/pageSize way.

The data should be loaded on event onPaginationChanged

Something like : 

 this.gridOptions.api.setTotalPages = 10

Upvotes: 4

Views: 14808

Answers (3)

Zaslam
Zaslam

Reputation: 354

I am able to set the total number of pages in ag-grid by using rowModelType: infinite row model with pagination: true to achieve the same effect:

See this example: https://www.ag-grid.com/javascript-grid-infinite-scrolling/#example-block-equal-page

Key point here is to set lastRow equal to totalCount of pages you get from server and pass it into params.successCallback(rowsThisPage, lastRow); In this way ag-grid would know total number of pages in advance and show the total count in pagination control.


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

Upvotes: 2

Pallav Chanana
Pallav Chanana

Reputation: 667

Giving Example in Vue js First add :-

 <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>

Then Add in methods

/** use of page size to setting pagination */

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

Upvotes: 0

Sunil B N
Sunil B N

Reputation: 4225

There is no direct api/parameter to set number of pages. But you can alter paginationPageSize to make sure you have 10 pages at max.

Let's assume you have can minimum 50 per page.

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

Then you may have some method which sets the data

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

Note: It's not nice to always distribute to ten pages unless you have considerable amount of rows which can't be displayed.

Upvotes: 1

Related Questions