如何让Angular Data Table默认跳转至选中记录所在页面？

我用Angular Data Table展示组织列表，每页最多显示5条数据。默认选中的组织索引为7，位于第2页，但表格默认仅显示第一页，手动点击分页按钮可切换到第2页并显示选中项。

我已计算出选中组织所在的页码为2，但表格无法自动跳转至该页面，求实现方法。

现有代码 #

HTML模板 #

<div>
  <div class="ion-padding">
    <table class="row-border hover" datatable="ng" [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);

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

  this.navigateToPage(pageNumber);
}

findOrgIndex(selectedOrg: any): number {
  return this.orgList.findIndex(org => org.id === selectedOrg);
}

navigateToPage(pageNumber: number) {
  this.currentPage = pageNumber;
  console.log("this.currentPage",this.currentPage)
}

解决方案 #

Angular DataTable基于jQuery DataTable实现，需要通过DataTable实例的API来控制分页跳转，步骤如下：

1. 引入并获取DataTable实例
   在组件中导入DataTableDirective，并通过ViewChild获取表格实例：

import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs';

@Component({
  // ...组件元数据
})
export class YourComponent {
  @ViewChild(DataTableDirective, { static: false })
  dtElement: DataTableDirective;
  dtInstance: Promise<DataTables.Api>;
  dtTrigger: Subject<any> = new Subject();
  pageSize = 5;
  // ...其他变量
}

2. 修改分页跳转方法
   更新navigateToPage方法，调用DataTable的page()和draw()方法实现跳转（注意DataTable的页码从0开始计数，需减1）：

navigateToPage(pageNumber: number) {
  this.dtInstance.then((dtApi: DataTables.Api) => {
    // draw(false)表示仅切换页码，不重新排序/过滤数据
    dtApi.page(pageNumber - 1).draw(false);
  });
}

3. 确保数据加载完成后再执行跳转
   如果orgList是异步获取的（比如从后端接口），必须等数据加载完成后再计算页码并触发跳转，同时初始化表格：

ngOnInit() {
  // 假设通过服务获取组织列表
  this.yourOrgService.getOrgList().subscribe(orgs => {
    this.orgList = orgs;
    // 获取选中的组织ID
    this.orgId = navigation.extras.state['orgId'];
    this.selectedOrgId = this.orgId;
    
    // 计算页码
    const selectedIndex = this.findOrgIndex(this.selectedOrgId);
    const pageNumber = Math.floor(selectedIndex / this.pageSize) + 1;
    
    // 触发表格初始化
    this.dtTrigger.next();
    // 等待表格实例初始化完成后跳转
    setTimeout(() => {
      this.navigateToPage(pageNumber);
    }, 0);
  });
}

4. 清理资源（可选）
   组件销毁时取消dtTrigger订阅，避免内存泄漏：

ngOnDestroy(): void {
  this.dtTrigger.unsubscribe();
}

内容的提问来源于stack exchange，提问作者Zulfath