Question

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

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

这是我当前的实现方式：

mycomponent.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>

mycomponent.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 作为回应，我得到3页第3页的3个数据。

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

作为回应，我从第10页的第1页获取数据。

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

请让我知道我在哪里出错，以及如何解决此问题。后端团队由于某种原因无法建立从零开始的分页索引。

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

0 个答案: