ng2智能表服务器端分页

Question

我使用的是ng2智能表。我想为ng2智能表实现服务器端分页。我还没有找到任何具体的参考资料。

我使用springboot作为后端，angular作为前端。

Answer 1

定义服务数据源

  source: ServerDataSource;

使用端点url和config对象在构造函数中设置source，如下所示：

this.source = new ServerDataSource(http,
   {
     endPoint: 'http:localhost:xxxx/api/endpoint', //full-url-for-endpoint without any query strings 
     dataKey: 'data.records' //your-list-path-from-response , 
     pagerPageKey: 'page' // your backend endpoint param excpected for page number key, 
     pagerLimitKey: 'pageSize, //your backend endpoint param excpected for page size
     totalKey: 'data.total', //  total records returned in response path
     filterFieldKey: your filter keys template should set to '#field#' if you need to 
     send params as you set, Default is '#field#_like' // ignore if no need for filteration 
  });`

然后我们需要添加如下设置对象：

settings = {
     actions: {
   add: true, //if you don't need default add button set to false 
   edit: true, //if you don't need default add button set to false 
   delete: true, //if you don't need default delete button set to false 
   position: 'right' // buttons position 
     }, // remove add , edit , delete objects if you don't use 
    add: {
  addButtonContent: '<i class="nb-plus"></i>',
  createButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
},
edit: {
  editButtonContent: '<i class="nb-edit"></i>',
  saveButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
},
delete: {
  deleteButtonContent: '<i class="nb-trash"></i>',
  confirmDelete: true,
},
pager: {
  display: true // set to false if no need for pagination 
},
columns: { 
  Id: {  // set up table cols - Id is a prop name returned from backend
    title: 'ID',  // display name in table header 
    type: 'number',
    filter: false  // add text filter for it or not 
  },
  Name: {
    title: 'Full Name',
    type: 'string',
    filter: false
  }
}
};

添加模板html的最后一步如下所示：

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