I have an Angular Data Table that displays a list of organizations. It shows a maximum of 5 organizations per page. However, the default selected organization index is 7, which means it is on the 2nd page. Therefore, I want the table to automatically display the page where the selected organization is located. In my code, the table currently only displays the first page. When I click the next button in the table, it navigates to the 2nd page and displays the selected organization.

This is my angular data table html

<div>
    <div class="ion-padding">
      <table   class="row-border hover" datatable="ng" datatable [dtOptions]="dtOptionForListTable()" [dtTrigger]="dtTrigger">
        <thead class="tr">
          <tr class="tr">
            <th class="name" datatableOrder="asc">Name</th>
            <th>Organisation Type</th>
            <th>Industry Type</th>
            <th class="class">Action</th></tr>
        </thead>
        <tbody class="tr-r">
          <tr *ngFor="let org of orgList; let i = index" (click)="selectedOrg(org.id)"
          [ngClass]="{'select-row': org.id === selectedOrgId }">
            <td>{{org.name}}
            </td>
            <td>{{org.orgTypeName}}</td>
            <td>{{org.industryTypeName}}</td>
            <td>
              <ion-icon id="view{{i}}" class="view" title="View" name="eye-outline" expand="block"
                (click)="getOrgDetails(org.id, true)"></ion-icon>
              <ion-icon id="edit{{i}}" class="edit" title="Edit" name="pencil-outline" (click)="getOrgDetails(org.id, false)"
                expand="block"></ion-icon>
              <ion-icon id="delete{{i}}" class="trash" title="Delete" name='trash' (click)="presentDeleteAlert(org.id)"></ion-icon>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

and calculated the page number of the selected organization’s location

       selectedOrg(orgId:number){
            this.selectedOrgId = orgId
            
            
            const selectedIndex = this.findOrgIndex(this.selectedOrgId)
            console.log("selectedIndex", selectedIndex);

            // this.orgList.indexOf(this.selectedOrgId);
            const pageNumber = Math.floor(selectedIndex / this.pageSize) + 1;
            console.log("pageNumber", pageNumber);

            // Navigate to the calculated page
            this.navigateToPage(pageNumber);
     }

 findOrgIndex(selectedOrg: any): number {
    return this.orgList.findIndex(org => org.id === selectedOrg); // Replace 'id' with the actual unique identifier property
  }
  navigateToPage(pageNumber: number) {
    // Assuming you have a property called currentPage in your component
    this.currentPage = pageNumber;
    console.log("this.currentPage",this.currentPage)
  }

page size is 5,
index is 7
found page number of selected org it is 2, but its not navigate to that page. How to navigate to 3 rd page in angular data table.

Therefore, I want the table to automatically display the page where the selected organization is located.