使用分页结果配置数据表

Question

任何人都可以建议如何使用分页结果配置数据表？

举个例子 ：

来自我的后端api的分页结果：

{
  "total": 50,
  "per_page": 15,
  "current_page": 1,
  "last_page": 4,
  "next_page_url": "http://domain.app?page=2",
  "prev_page_url": null,
  "from": 1,
  "to": 15,
  "data":[
        {
            // Result Object
        },
        {
            // Result Object
        }
  ]
}

目前我正在使用角度为6的ng2-smart-table。

你们可以给我解决方案与正常的数据表选项，我可以从中控制分页。

Answer 1

这是我对ng2-smart-table的配置，希望对你有帮助。

HTML

<ng2-smart-table [settings]="settings" [source]="alerts"></ng2-smart-table>

组件ts

组态：

alerts: LocalDataSource;

 settings = {
    columns: {
      tester: {
        title: 'Tester'
      },
      part_number: {
        title: 'Part Number',
      },
    editable: false,
    actions:{
      add: false,
      edit: false,
      delete: false
    }
  };

履行

ngOnInit() { 
    this.alerts= new LocalDataSource([]); 
    this.alertService.getAlertsObservable().subscribe(res =>{
      this.alerts.load(res); 
    }); 
}

Answer 2

如果你读过这个帖子，我想你会找到解决方案。 https://github.com/akveo/ng2-smart-table/issues/576以下是该主题的简要信息

this.source = new ServerDataSource(http, {
  endPoint: this.url,
  pagerLimitKey:"_limit",
  pagerPageKey:"_page",
  sortDirKey: "_order",
  sortFieldKey: "_sort",
  dataKey:'data',
  totalKey:'total_count'
});

服务器返回的数据：

{
  data: [
    { "id": 1, "value": "A" },
    { "id": 2, "value": "B" },
    ...
  ],
  total_count: 10000
}

total_count将用于计算页数。

或者，我使用像这个ng2-smart-table with paging from back-end (Spring)这样的LocalDataSource解决了这个问题