Как реализовать разбиение на страницы на стороне сервера Ngx-Datatable, если разбиение на страницы не основано на нуле - PullRequest
Новая
       30

Как реализовать разбиение на страницы на стороне сервера Ngx-Datatable, если разбиение на страницы не основано на нуле

0 голосов
/ 31 декабря 2018

Я пытаюсь реализовать разбиение на страницы на стороне сервера в веб-приложении на основе угловых 5.

Проблема заключается в том, что 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 данные для страницы № 2 с 3 элементами.

Теперь, если я нажму на действиекнопка, чтобы заблокировать или разблокировать конкретного пользователя. Это то, что отправлено в параметрах запроса: list?pageNumber=1&pageSize=10&sortBy=id&sortOrder=desc

, и в ответ я получаю данные, основанные на странице № 1, с 10 элементами.

, но этовремя активной страницы в пагинации все еще "2"?

Пожалуйста, дайте мне знать, где я делаю ошибку и как я могу это исправить.По какой-то причине бэкэнд-команда не может сделать нумерацию нумерации страниц.

...