使用layui进行分页

最新推荐文章于 2023-06-14 21:43:29 发布

原创最新推荐文章于 2023-06-14 21:43:29 发布 · 641 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #html

java 专栏收录该内容

31 篇文章

订阅专栏

后端代码

	@RequestMapping("/findUserRole2")
    @ResponseBody
    public Map findUserList2(Model model, int page, int limit) {
        PageHelper.startPage(page, limit);
        List userRoleList = adminService.findUserRole();

        Integer count = userMapper.selectCount(null);
        PageInfo pageInfo = new PageInfo<>(userRoleList, limit);
        Map map = new HashMap();
        map.put("code", 0);
        map.put("msg", " ");
        map.put("count", count);
        map.put("data", userRoleList);
        return map;
    }

前端代码

<script src="/assets/layui.all.js"></script>
<script src="/js/jquery.min.js"></script>
<script>
    var element = layui.element;
    var table = layui.table;
    var form = layui.form;

    //展示已知数据
    table.render({
        elem: '#demo'
        , url: '/admin/findUserRole2'
        , cols: [
            [
                {type: 'checkbox'}
                , {title: '序号', align: 'center', type: 'numbers'}
                , {field: 'username', title: '用户名', align: 'center', sort: true}
                , {field: 'nameZh', title: '角色', align: 'center', sort: true}
                , {
                field: 'create_time', title: '添加时间', align: 'center',
                templet: '<div>{{ layui.util.toDateString(d.create_time, "yyyy-MM-dd HH:mm:ss") }}</div>', sort: true
            }
                , {
                field: 'right', title: '操作', align: 'center', toolbar: "#barDemo"
            }
            ]
        ]
        , skin: 'line' //表格风格
        , even: true
        , page: {
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , limit: 10
            , limits: [10, 20, 50]
            , first: "首页"
            , last: "尾页"
        }


    });
</script>