fix(ui/datatables): sync page count with filtering [EE-5890] (#10010)

app/react/components/PaginationControls/PageSelector.tsx

@@ -8,29 +8,22 @@ interface Props {
   boundaryLinks?: boolean;
   currentPage: number;
   directionLinks?: boolean;
-  itemsPerPage: number;
   onPageChange(page: number): void;
-  totalCount: number;
+  pageCount: number;
   maxSize: number;
   isInputVisible?: boolean;
 }
 
 export function PageSelector({
   currentPage,
-  totalCount,
-  itemsPerPage,
+  pageCount,
   onPageChange,
   maxSize = 5,
   directionLinks = true,
   boundaryLinks = false,
   isInputVisible = false,
 }: Props) {
-  const pages = generatePagesArray(
-    currentPage,
-    totalCount,
-    itemsPerPage,
-    maxSize
-  );
+  const pages = generatePagesArray(currentPage, pageCount, maxSize);
   const last = pages[pages.length - 1];
 
   if (pages.length <= 1) {
@@ -42,7 +35,7 @@ export function PageSelector({
       {isInputVisible && (
         <PageInput
           onChange={(page) => onPageChange(page)}
-          totalPages={Math.ceil(totalCount / itemsPerPage)}
+          totalPages={pageCount}
         />
       )}
       <ul className="pagination">

app/react/components/PaginationControls/PaginationControls.tsx

@@ -9,7 +9,7 @@ interface Props {
   page: number;
   pageLimit: number;
   showAll?: boolean;
-  totalCount: number;
+  pageCount: number;
   isPageInputVisible?: boolean;
   className?: string;
 }
@@ -20,7 +20,7 @@ export function PaginationControls({
   onPageLimitChange,
   showAll,
   onPageChange,
-  totalCount,
+  pageCount,
   isPageInputVisible,
   className,
 }: Props) {
@@ -38,8 +38,7 @@ export function PaginationControls({
             maxSize={5}
             onPageChange={onPageChange}
             currentPage={page}
-            itemsPerPage={pageLimit}
-            totalCount={totalCount}
+            pageCount={pageCount}
             isInputVisible={isPageInputVisible}
           />
         )}

app/react/components/PaginationControls/generatePagesArray.ts

@@ -12,12 +12,10 @@ export /**
  */
 function generatePagesArray(
   currentPage: number,
-  collectionLength: number,
-  rowsPerPage: number,
+  totalPages: number,
   paginationRange: number
 ): (number | '...')[] {
   const pages: (number | '...')[] = [];
-  const totalPages = Math.ceil(collectionLength / rowsPerPage);
   const halfWay = Math.ceil(paginationRange / 2);
 
   let position;