ng2 smart table server side pagination

Question

I am using ng2 smart table. I want to implement server side pagination for ng2 smart table. I haven't found any specific references.

I am using springboot for backend and angular for front end.

Answer 1

Define serve data source

  source: ServerDataSource;

set source in constructor with end-point url and config object like following:

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

Then we need to add settings object as following:

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

final step to add your template html as following :

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