如果所选记录位于 Angular 数据表的第二页，我们可以默认导航到该页面吗？

Question

我有一个 Angular 数据表，显示组织列表。每页最多显示 5 个组织。但是，默认选择的组织索引是 7，这意味着它位于第 2 页。因此，我希望表格自动显示所选组织所在的页面。在我的代码中，该表当前仅显示第一页。当我单击表中的下一个按钮时，它会导航到第二页并显示所选的组织。

这是我的角度数据表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>

并计算所选组织位置的页码

      ngOninit(){
            this.orgId = navigation.extras.state['orgId'];
            this.selectedOrgId = this.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)
  }

页面大小为5， 指数为7 发现所选组织的页码为 2，但无法导航到该页面。如何导航到角度数据表中的第二页。

因此，我希望表格自动显示所选组织所在的页面。

Answer 1

您可以使用状态保存数据表将为您提供该功能

来管理分页

你可以这样设置dtoption

        stateSave: true,
        "iDisplayLength": 10,
        "pageLength":15,
        "oSearch": {"sSearch": ""},
        stateSaveCallback: function(settings,data) {
            localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data))
        },
        stateLoadCallback: function(settings) {
            return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ))
        },

欲了解更多信息，您可以查看网站 https://datatables.net/examples/basic_init/state_save.html