一、layui 一个简单轻量级的后台框架,中小型项目非常合适,容易上手,处理优秀,后续会根据整理把一下坑记录下来供大家参考
1、分页效果:
2、分页说明:layui对于分页 封装的非常简单了 ,会默认带两个参数请求后台page默认为0,limit默认为10,当然可以重新定义,至于多少页、上页、下页、跳转指定页由layui 自动封装核算出来page、limit,后台只要提供总数据count数量。
2.1 js代码
table.render({
elem: '#currentTableId', //显示的表格ID
url: '/platform/systemUserGetPage',//请求URL
method:"post",//请求方式
toolbar: '#toolbarDemo',//表格加入操作按钮ID
defaultToolbar: ['filter', 'exports', 'print', {//表格设置
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
request: {//请求参数重定义
pageName:'currentPageNo',//页码名称默认为 page
limitName:'pageSize' //页码数量默认为 limit
},
response:{//返回参数重定义
countName: 'totalConout',//数据总数 默认为count
dataName: 'data'//数据体 默认为data
},
cols: [//表格内容填充
[
{type: "checkbox", width: 50},
{field: 'sysId', width: 100, title: '账号ID', sort: true},
{field: 'username', width: 120, title: '账号名'},
{field: 'roleName', width: 120, title: '角色'},
{field: 'sysSex', width: 80, title: '性别', sort: true,templet: function(data){if(data.sysSex == 1){return '男'}else{return '女'}}},
{field: 'sysAge', width: 80, title: '年龄'},
{field: 'sysMobile',width: 150, title: '手机号码',sort: true },
{field: 'sysEamil', width: 220, title: '邮箱', sort: true},
{field: 'accoutExpireFlag', width: 120, title: '账户过期', sort: true,templet: function(data){if(data.accoutExpireFlag == true){return '正常'}else{return '冻结'}}},//判断数据显示
{field: 'accountLockFlag', width: 120, title: '账户锁定', sort: true,templet: function(data){if(data.accountLockFlag == true){return '正常'}else{return '冻结'}}},
{field: 'passowrdExpireFlag', width: 120, title: '密码过期', sort: true,templet: function(data){if(data.passowrdExpireFlag == true){return '正常'}else{return '冻结'}}},
{field: 'sysStatusFlag', width: 120, title: '账户可用', sort: true,templet: function(data){if(data.sysStatusFlag == true){return '正常'}else{return '冻结'}}}
/* {title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center"}*/
]
],
limits: [10, 15, 20],//每页数据显示量
limit: 10,//默认每页数据显示量
page: true,//是否分页
skin: 'line' //表格风格样式
});
2.2后台代码定义一个请求类和返回类