在角度数据表中实现服务器端分页答案

【问题标题】：Implement Server side pagination in angular-datatable在角度数据表中实现服务器端分页
【发布时间】：2019-10-17 19:03:52
【问题描述】：

在角度数据表中实现服务器端分页。表格未正确呈现。我们必须更改后端的响应才能使数据表正常工作？下面我提供我尝试过的内容。如果有任何机构尝试使用数据表进行角度分析，请指导我

<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
    }
  }

【问题讨论】：

标签： angular datatable pagination

【解决方案1】：

这里是您的问题的解决方案，可能会对您有所帮助。

看起来很简单:)

因此，当您使用带角度的服务器端数据表时，在.ts组件文件中使用ajax时，相反，直接调用某个 URL。只需使用返回可观察的服务（在我的情况下）。这是指导我的数据表演示的链接： https://stackblitz.com/edit/responsive-server-side-1264

代码sn-p：

   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);
        });
    };

【讨论】：