Пагинация на стороне сервера смарт-таблицы ng2

Определить источник данных обслуживания

  source: ServerDataSource;

установите источник в конструкторе с URL-адресом конечной точки и объектом конфигурации, как показано ниже:

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>