Реализовать разбиение на страницы на стороне сервера в угловых данных - PullRequest
Новая
       29

Реализовать разбиение на страницы на стороне сервера в угловых данных

0 голосов
/ 01 июня 2019

Реализация нумерации на стороне сервера в таблице угловых данных.Таблица не отображается должным образом.Мы должны изменить ответ бэкэнда, чтобы таблица данных работала правильно?Ниже я приведу то, что попробовал.Если какое-либо тело пыталось выполнить угловое с таблицей данных, пожалуйста, укажите мне 

<div class="container">
    <table datatable [dtOptions]="dtOptions" class="row-border hover" >
      <thead>
        <tr>
          <th>Id</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Age</th> 
           <th>Country</th>      >
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let user of users">
          <td>{{ user.id }}</td>
          <td>{{ user.firstName }}</td>
          <td>{{ user.lastName }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.country }}</td>      
        </tr>
      </tbody>
    </table>
  </div>



  dtOptions: any = {}

  @Input() users: User[]

  constructor() { }

  ngOnInit() {
    this.dtOptions = {
      data: [],
      pagingType: 'full_numbers',
      pageLength: 2,
      serverSide: true,
      processing: true,
      responsive: true     
    }
  }

  ngOnChanges() {
    if (this.matchBids) {
      this.dtOptions.data = this.matchBids
    }
  }

1 Ответ

0 голосов
/ 17 июля 2019

Вот решение вашего вопроса, которое может вам помочь.

Все просто, как выглядит :)

Так что, когда вы используете серверные таблицы данных с угловыми значениями, В файле компонента .ts при использовании ajax, вместо этого сделайте прямой звонок на какой-нибудь URL. Просто воспользуйтесь сервисом, который возвращает наблюдаемое (в моем случае). Вот ссылка на демонстрационный пример таблиц данных, которым я руководствовался: https://stackblitz.com/edit/responsive-server-side-1264

Фрагмент кода: 

   this.dtOptions.ajax = (dataTablesParameters: any, callback) => {
      that.controllerService.getAdminControllers(this.dtOptions.pageLength,dataTablesParamete.start).subscribe(resp => {
          that.data = resp.data;
          callback({
            recordsTotal: resp.pagination.totalCount,
            recordsFiltered: resp.pagination.totalCount,
            data: []

          });
          console.log(that.data);
        });
    };
...