angular5 - 如果分页不是基于零的，如何实现 Ngx-Datatable 服务器端分页

Question

我正在尝试在基于 Angular 5 的 Web 应用程序中实现服务器端分页。

问题是 API 需要从索引 1 开始分页，而库“ngx-datatable”分页是基于 0 的。

这是我当前的实现：

我的组件.html

<ngx-datatable
    #usersTable
    class='material text-centered'
    [rows]='users'
    [columns]="usersColumn"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [externalPaging]="true"
    [offset]="page.offset"
    [limit]="page.pageSize"
    [count]="page.totalElements"
    (page)='fetchList($event)'>
 </ngx-datatable>

我的组件.ts

page: any = {
  offset: 0,
  pageNumber: 1,
  pageSize: 10,
  totalElements: '',
  sortBy: "id",
  sortOrder: "desc"
};

ngOnInit() {

this.usersColumn = [
  {
    name: 'S.NO',
    prop: 'sno'
  },
  {
    name: 'First Name',
    prop: 'firstName'
  },
  {
    name: 'Last Name',
    prop: 'lastName'
  },
  {
    name: 'Email',
    prop: 'email',
    width: 200
  },
  {
    name: 'Action',
    cellTemplate: this.action
  }
 ];

  this.fetchList({ offset: 0 });
}

generateSerialNo(pageNo, size, i) {
  const index = i + 1;
  return pageNo == 1 ? index : (pageNo - 1) * size + index;
}

fetchList(pageInfo) {
  this.page.pageNumber = pageInfo.offset + 1;

  const { pageNumber, pageSize, sortBy, sortOrder } = this.page);

  this.ListService.fetchList(pageNumber, pageSize, sortBy, sortOrder).subscribe(
  success => {
    if (success && !success['isError']) {
      const responseObj = success['responseObject'];
      if (responseObj) {
        const List = responseObj.content || [];
        const { totalElements } = responseObj;

        this.users = List.map((item, i) => {
          // set serial no. for user in current iteration
          const serialNumber = this.generateSerialNo(this.page.pageNumber, this.page.pageSize, i);
          return { sno: serialNumber, ...item };
        });

        this.page.totalElements = totalElements;
      }
    } else {
      this.toastr.error(success['message'], 'Oops!');
    }
  },
  errorResp => {
    const error = errorResp['error'];
    this.toastr.error(error['message'], 'Oops!');
  }
);

现在说，表格中有一个操作列，其中包含用于阻止或取消阻止用户的按钮，单击时会调用如下函数：

blockUnblockUser(toBlock: boolean) {

  this.ListService.blockUnblockUser(toBlock, this.selectedUser.id).subscribe(
  success => {
    if (success && !success['isError']) {

      this.fetchList(this.page);

      this.utilService.closeModal();
      this.toastr.success(success['message'], 'Success!');
    } else {
      this.utilService.closeModal();
      this.toastr.error(success['message'], 'Oops!');
    }
  },
  errorResp => {
    const error = errorResp['error'];
    this.utilService.closeModal();
    this.toastr.error(error['message'], 'Oops!');
  });
}

这就是问题所在。在页面加载时，我得到第一页的列表，第一页是活动页面。现在单击第 2 页，在 API 的请求参数中是这样的： list?pageNumber=2&pageSize=10&sortBy=id&sortOrder=desc 作为响应，我得到第 2 页的 3 个数据和 3 个项目。

现在，如果我单击操作按钮来阻止或取消阻止特定用户，这就是请求参数中发送的内容： list?pageNumber=1&pageSize=10&sortBy=id&sortOrder=desc

作为回应，我获得了基于页码 1 的数据，其中包含 10 个项目。

但是这次分页中的活动页面仍然是“2”？

请让我知道我在哪里犯了错误以及如何解决这个问题。后端团队由于某种原因无法使分页从零开始索引。

标签： angular5ngx-datatable