如何解决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}}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。