mapper层
/*
* 查找用户数据数量
* */
@Select("Select COUNT(*) " +
"from user ")
public int getUserCount() throws Exception;
/*
* 查找所有用户数据
* */
@Select("Select * " +
"from user " +
"limit #{page},#{limit}")
public List<User> getAllUser(int page, int limit) throws Exception;
service层：
/*
* 查找用户数据数量
* */
@Override
public int getUserCount() throws Exception {
return UserMapper.getUserCount();
}
/*
* 查找所有用户数据
* */
@Override
public List<User> getAllUser(int page, int limit) throws Exception {
return UserMapper.getAllUser(page, limit);
}
controller层
/*用户账号页面*/
@RequestMapping("/goUser_List")
public String goUser_List() throws Exception {
return "user_list";
}
/*查询用户账号信息数据*/
@RequestMapping("/getAllUser")
@ResponseBody
public String getAllUser(Map<Object, Object> map, int page, int limit) throws Exception {
List<User> users = UserService.getAllUser((page - 1) * limit, limit);
map.put("code", 0);
map.put("msg", "");
map.put("count", UserService.getUserCount());
map.put("data", users);
String json = JsonUtils.objectToJson(map);
return json;
}
查看用户页面前端展示：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>用户账号</title>
<link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
</head>
<body layadmin-themealias="default">
<div class="layui-layout layui-layout-admin">
<!-- 头部区域 -->
<div th:include="header.html :: header"></div>
<!-- 头部区域 -->
<!-- 内容区域 -->
<div class="layui-body">
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-header">
<h2><b>用户账号</b></h2>
</div>
<table class="layui-table" id="user_list" lay-filter="test1"></table>
<script type="text/html" id="barDemo1">
<a class="layui-btn layui-btn-xs" lay-event="edit1">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del1">删除</a>
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="permission">分配权限</a>
</script>
<!-- <script type="text/html" id="toolbarDemo1">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script> -->
</div>
</div>
</div>
<!-- 内容区域 -->
<!-- 底部区域 -->
<div th:include="footer.html :: footer"></div>
<!-- 底部区域 -->
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
layui.use(['table', 'element'], function () {
var element = layui.element;
var table = layui.table;
//第一个实例
table.render({
elem: '#user_list',
height: 'full-185',
url: '/user/getAllUser', //数据接口
page: true, //开启分页
toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
// defaultToolbar: ['filter', 'print', 'exports'], //自由配置头部工具栏右侧的图标按钮
title: '用户账号表',
cols: [
[ //表头
/* {
width: 50,
fixed: 'left',
type:'checkbox',
align: 'center'
}, */
{
title: '序列',
width: 70,
type: 'numbers',
fixed: 'left',
align: 'center'
}, {
field: 'super_name',
title: '上级用户ID',
width: 100,
align: 'center',
}, {
field: 'register_date',
title: '注册日期',
width: 160,
align: 'center',
}, {
field: 'vip_class',
title: '会员等级',
width: 120,
align: 'center'
}, {
field: 'real_name',
title: '真实姓名',
width: 100,
align: 'center'
}, {
field: 'username',
title: '账号',
width: 100,
align: 'center'
}, {
field: 'password',
title: '密码',
width: 120,
align: 'center'
}, {
field: 'phone_one',
title: '联系电话(一)',
width: 120,
align: 'center'
}, {
field: 'phone_two',
title: '联系电话(二)',
width: 120,
align: 'center'
}, {
field: 'wechar',
title: '微信',
width: 120,
align: 'center'
}, {
field: 'qq',
title: 'QQ',
width: 120,
align: 'center'
}, {
field: 'alipay_number',
title: '支付宝账号',
width: 200,
align: 'center'
}, {
field: 'alipay_name',
title: '支付宝名称',
width: 150,
align: 'center'
}, {
field: 'bank_name',
title: '银行名称',
width: 150,
align: 'center'
}, {
field: 'bank_username',
title: '银行户名',
width: 100,
align: 'center'
}, {
field: 'bank_number',
title: '银行卡号',
width: 200,
align: 'center'
}, {
field: 'email',
title: '邮箱',
width: 200,
align: 'center'
}, {
title: '操作',
toolbar: '#barDemo1',
width: 200,
fixed: 'right',
align: 'center'
},
]
]
});
//监听行工具事件
table.on('tool(test1)', function (obj) {
var data = obj.data;
//console.log(obj)
if (obj.event === 'del1') {
layer.confirm('确认删除?', function (index) {
obj.del();
layer.close(index);
});
} else if (obj.event === 'edit1') {
layer.prompt({
formType: 0,
title: '会员等级',
value: [
data.vip_class
]
}, function (value, index) {
obj.update({
vip_class: value,
});
layer.close(index);
});
}
});
});
</script>
</body>
</html>
转载：https://blog.csdn.net/weixin_45614751/article/details/102551750
查看评论