Question 268078 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to retrieve the current number of rows to the end row count in AG Grid

In Ag-Grid pagination, it provides the total row count and the row number, for example in the image below you can see 101 to 200 of 8,618. Where 8618 is the total row count which can be retrieved from gridApi.paginationGetRowCount(). But which parameter do I use to get the 101 to 200 count? I am unable to find it in the grid api.

enter image description here

Tags:

2

Answers


  1. 0

    There is no such direct API. but you can use two pagination API to construct the output data.

     1. paginationGetCurrentPage()
 2. paginationGetPageSize()  // you can also put static page size value if it is static

    you can multiply index value with page-size to get desired output.

    (page-index * page-size + 1) + ‘–‘ + ((page-index + 1) * page-size)

    this.agGrid.api.paginationGetPageSize() *this.agGrid.api.paginationGetCurrentPage() + 1) + '-' +  (this.agGrid.api.paginationGetCurrentPage()+1)*this.agGrid.api.paginationGetPageSize();

    i have created a stackblitz example for you. please select/upvote if it helps.

    Login or Signup to reply.
  2. 0

    By getting these info:

    , you can calculate the first item no. and last item no. for the selected page.

    For my use case, I am trying to calculate those values when the page is changed via (paginationChanged) event.

    <ag-grid-angular
  ...
  (paginationChanged)="onPaginationChanged($event)"
></ag-grid-angular>

    For firstItemNoForCurrentPage, you need to get the least value between currentPageIndex * pageSize + 1 and totalRowCount. This is aimed at handling when there is no record.

    For lastItemNoForCurrentPage, you need to get the least value between currentPageIndex * pageSize + pageSize and totalRowCount. This is aimed at handling when the current page doesn’t contain the full number of items as pageSize.

    onPaginationChanged = (event: PaginationChangedEvent<IOlympicData>) => {
  if (!this.gridApi) return;

  // Get current page - 0-index based
  let currentPageIndex = this.gridApi.paginationGetCurrentPage();

  // Get total count
  let totalRowCount = this.gridApi.paginationGetRowCount();

  // Get page size
  let pageSize = this.gridApi.paginationGetPageSize();

  let firstItemNoForCurrentPage = Math.min(
    currentPageIndex * pageSize + 1,
    totalRowCount
  );

  let lastItemNoForCurrentPage = Math.min(
    currentPageIndex * pageSize + pageSize,
    totalRowCount
  );

  console.log('firstItemNoForCurrentPage:', firstItemNoForCurrentPage);
  console.log('lastItemNoForCurrentPage:', lastItemNoForCurrentPage);
};

    Demo @ StackBlitz

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search