ng2智能表服务器端分页

问题描述

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

我在后端使用springboot，在前端使用angular。

解决方法

定义服务数据源

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

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

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>',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
  }
}
};

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

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

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

{{1}}