在angular-datatable中实现服务器端分页

时间:2019-06-01 12:33:25

标签: angular datatable pagination

在角度数据表中实现服务器端分页。该表未正确呈现。我们必须更改后端的响应才能使数据表正常工作吗? 在下面,我提供了我尝试过的内容。如果有人尝试用数据表倾斜,请指导我

<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 :(得分:0)

以下是您的问题解决方案,可能会对您有所帮助。

看起来很简单:)

因此,当您使用带角度的服务器端数据表时,  在使用ajax的.ts组件文件中,  而是直接调用某些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);
        });
    };