后端控制分页的st表格使用
数据列初始化
ts
columns: STColumn[] = [
{ title: '', index: 'id', type: 'checkbox' },
{ title: '姓名', index: 'name', width: '80px' },
{ title: '电话', index: 'phone', width: '180px' },
{
title: '性别', index: 'gender',
filter: {
menus:[ { text: '男', value: '男', checked: false },
{ text: '女', value: '女', checked: false }]，
clearText: '清空',
multiple: false,
},
width: '150px'
},
{ title: '职位', index: 'position', width: '80px' },
{ title: '工资', index: 'salary', width: '150px' },
{ title: '住址', index: 'address', width: '150px' }
];
后端接口获取data
ts
this.http.post('接口地址', {
pageNum: pagenum,
pageSize: pagesize,
gender: ''
}).subscribe((res: any) => {
//打印后端返回的结果
console.log(res)
//将返回的结果list赋给data
this.data = Array(res.data.list.length)
.fill({}).map((item: any, idx: number) => {
return {
id: res.data.list[idx].id,
name: res.data.list[idx].name,
phone: res.data.list[idx].phoneNo,
gender: res.data.list[idx].gender,
position: res.data.list[idx].position,
salary: res.data.list[idx].salary,
address: res.data.list[idx].address,
}
})
//如果是后端分页，把后端返回的总的数据赋给total，
//当前页码赋给pi，每页展示条数赋给ps
this.pi = res.data.pageNum;
this.total = res.data.total;
this.ps = res.data.pageSize;
//分页栏中显示总的数据条数
this.pages.total = '共' + this.total + '条',
});
表格分页设置
ts
pages: STPage = {
total: '',//分页显示多少条数据，字符串型
show: true,//显示分页
front: false //关闭前端分页，true是前端分页，false后端控制分页
};
change回调
st表格变化时回调包括：pi、ps、checkbox、radio、sort、filter、click、dblClick 变动
change(ret: STChange) {
//打印变化的所有信息
console.log('change', ret);
//filter变化
if (ret.filter) {
if (ret.filter.title == '性别') {
let i = 0;
ret.filter.filter.menus.map(item => {
if (item.checked) {
选中操作逻辑
} else {
i++;
if (i == ret.filter.filter.menus.length) {
filter清空操作逻辑
}
}
})
}
}
if (ret.checkbox) {
ret.checkbox.forEach(item => {
选中逻辑
})
}
if(ret.pi){
页码变化逻辑
}
}
滚动
//y轴滚动
scroll = { y: '350px' };
html数据绑定展示
data为后端获取的数据，ps展示条数，pi当前页码，total数据总条数，columns数据列，page翻页配置，change数据变化回调。
<st #st
[data]="data"
[ps]="ps"
[pi]="pi"
[total]="total"
[columns]="columns"
[scroll]="scroll"
[page]="pages"
(change)="change($event)">
</st>
