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

目前，我正在将 ng2-smart-table 与角度6 一起使用。

你们可以为我提供带有普通数据表选项的解决方案，从中我可以控制分页。

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将用于计算页数。

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

使用分页结果配置数据表

2 个答案: