一、引入layui的js,css
|
1 2 3 4 |
<script th:src="@{static/admin/lib/jquery/jquery.min.js}"></script> <script th:src="@{static/admin/layui/layui.js}"></script> <link rel="stylesheet" type="text/css" href="../../../static/admin/layui/css/layui.css" /> <link rel="stylesheet" type="text/css" href="../../../static/admin/css/admin.css" /> |
二、html增加列表和分页容器
三、js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<script> var currpage=1; var limit=5; $(function () { getRoleList(currpage); }) function getRoleList(currpage){ $.post("/getRoleList",{current:currpage,limit:limit}, function (res) { var html=""; layui.each(res.rows, function (index, row) { var status=row.status; var button=''; if(status==1){ button='<button class="layui-btn layui-btn-xs layui-btn-normal">正常</button>' }else{ button='<button class="layui-btn layui-btn-xs layui-btn-danger">禁用</button>' } //模拟渲染 html+= '<tr> ' + '<td><input type="checkbox" name="" lay-skin="primary" data-id="1"></td> ' + '<td class="hidden-xs" >'+(index+1)+'</td> <td>'+row.name+'</td> ' + '<td>'+row.description+'</td> ' + '<td>'+button+'</td> ' + '<td> ' + '<div class="layui-inline"> ' + '<button class="layui-btn layui-btn-small layui-btn-normal edit-btn" data-url="jumpAddOrUpdateRole" data-id='+row.id+'><i class="layui-icon"></i></button>' + '<button class="layui-btn layui-btn-small layui-btn-danger del-btn" data-url="deleteRole" data-id='+row.id+'><i class="layui-icon"></i></button> ' + '</div> ' + '</td> ' + '</tr>'; }) $("#table").html(html) layui.use(['laypage', 'layer'], function () { var laypage = layui.laypage laypage.render({ elem: 'page-wrap', count: res.total, limit: limit, curr:currpage, jump: function (obj,first) { if (!first) { currpage=obj.curr getRoleList(currpage) } } }); }); }); } /script> |
四、后台方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/** * @Dep 获取角色列表 * @Author xiwen * @Date 2021/11/27 19:11 */ @ResponseBody @PostMapping("/getRoleList") public PageResultEntity getRoleList(SysRoleEntity role) { try { Integer current = Integer.parseInt(role.getCurrent()); Integer limit = Integer.parseInt(role.getLimit()); Page<SysRoleEntity> page = new PageInfo<>(current, limit); Page<SysRoleEntity> rolePage = roleService.selectRoleList(role, page); PageResultEntity resultPage = ResultUtil.result(rolePage.getRecords(), rolePage.getTotal()); return resultPage; } catch (Exception e) { throw e; } } |
五、效果展示
六、开源地址：https://gitee.com/Dxiwenzhang/xiwenzhang/tree/master
