第九章分页查看用户信息

easyui官方demo查看数据请求规则

http://www.jeasyui.com/tutorial/datagrid/datagrid2_demo.html

编写用户分页接口

在com.xbb.springboot.tutorial.web.UserController添加分页接口

@RequestMapping("pageUser")
    @ResponseBody
    public Map<String, Object> pageUser(int page,int rows){
        Page<User> pageInfo = new Page<>();
        pageInfo.setCurrent(page);
        pageInfo.setSize(10);
        
        QueryWrapper<User> qw = new QueryWrapper<>();
        pageInfo = userService.page(pageInfo, qw);
    
        Map<String, Object> result = new HashMap<>();
        result.put("total", pageInfo.getTotal());
        result.put("rows", pageInfo.getRecords());
        return result;
    }

编写用户界面

在templates目录下创建user目录和user.html

image.png

html中内容如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>管理员信息管理</title>
    <link rel="stylesheet" type="text/css" href="${ctx.contextPath}/js/jquery-easyui-1.9.7/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${ctx.contextPath}/js/jquery-easyui-1.9.7/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${ctx.contextPath}/js/jquery-easyui-1.9.7/demo/demo.css">
    <script type="text/javascript" src="${ctx.contextPath}/js/jquery-easyui-1.9.7/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx.contextPath}/js/jquery-easyui-1.9.7/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="userGrid"></table>
</body>
<script type="text/javascript" src="${ctx.contextPath}/js/user/user.js"></script>
</html>

在static目录下创建user文件夹和user.js

image.png

内容如下:

$('#userGrid').datagrid({
    url: '/user/pageUser',
    pagePosition:'bottom',
    pagination: true,
    singleSelect: true,
    fitColumns: true,
    toolbar: '#userGridToolBar',
    idField: "id",
    loadMsg: "正在努力为您加载数据",
    fit: true,
    rownumbers:true,
    nowrap: true,
    columns:[[
        {field:'username',title:'用户名',width:100},
        {field:'password',title:'密码',width:100},
        {field:'birthday',title:'出生日期',width:100}
    ]]
});

在ViewController中添加如下方法映射访问user.html

@RequestMapping(value = "/{path1}/{path2}")
    public String view2(@PathVariable("path1")String path1,@PathVariable("path2")String path2) {
        return path1 + "/" + path2;
    }

登录后访问分页页面

http://localhost:8080/view/user/user

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

第九章 分页查看用户信息