SSM+EasyUI实现分页功能

一、整体的思路

1.前台：使用 EasyUI的 datagrid控件来将数据渲染。

2.后台Controller层：接受前台穿过来的参数：当前页码，每次查询的数据条数。

3.后台Dao层：进行 limit 限制查询。

二、详解

1.前台 datagrid：

（1）介绍：datagrid，其实也就是一个数据表格，它可以接受从后台传回的数据，并以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。更多功能可以参考EasyUI的官网。

（2）datagrid中的部分常用属性：

SSM+EasyUI实现分页功能

上面的属性待会贴代码的时候会有示例。

2.后台Controller层：

一开始我不知道怎么获取前台页面的页码，和查询条数。后来查询才知道，这是不用操心的。

如果不指定，后台会自己获取当前页码，默认查询的数据条数是10。可以在设置datagrid中设置属性：

pageSize:20, 这样后台就会一下子查询 20条数据了。

3.后台Dao层：

这里直接贴代码吧：

    <select id="findByPage" resultType="User">
        SELECT * FROM gt_user LIMIT #{page},#{rows}
    </select>

先说明一点，resultType我直接写User是因为我在mybatis的xml配置文件中定义过别名了。然后也没有parameterType，这里就是我想说明的，一开始我使用的是 parameterType="java.lang.Integer" ，但是报错了。DEBUG o.s.web.servlet.DispatcherServlet - Failed to complete request: org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.binding.BindingException: Parameter 'page' not found. Available parameters are [arg1, arg0, param1, param2]

这个错误是因为这种写法只能传进去一个参数，而我传了两个。解决的方法应该不止一种，我选择了一个较为简便的，但是不知道规不规范，若有不当，还请指正。我的解决办法就是下面的代码了：

List<User> findByPage(@Param("page") int page, @Param("rows") int rows);

添加了 @Param，然后运行成功。

三、代码

1.前台jsp:

 $(function () {
            $("#dg").datagrid({
                title:"用户信息列表",
                url:"${contextPage.request.contextPath}/user/userList.action",
                method:"POST",
                pagination:true,
                pageSize:20,
                pageList:[10,20,30],
                rownumbers:true,
                singleSelect:true,
                fit:true,
                border:false,
                idField:"userId",
                fitColumns:true, //去除滚动条
                columns:[[
                    {field:'userId',title:'用户ID',width:200,hidden:true,align:'center'},
                    {field:'userName',title:'用户名',width:200,align:'center'},
                    {field:'userEmail',title:'邮箱',width:200,align:'center'},
                    {field:'userPhone',title:'电话号码',width:200,align:'center'},
                    {field:'userAdmin',title:'身份',width:200,align:'center'}
                ]]
            })
        });
    </script>


<body>
    <table id="dg"> </table>
</body>

2.Controller:

    @RequestMapping("/userList")
    @ResponseBody
    public Map<String,Object> userList(int page,int rows){
        List<User> userList = userService.userList(page,rows);
        map.put("total",userService.getCount());       //数据记录数
        map.put("rows",userList);                     //数据集合
        return map;
    }

3.ServiceImpl(接口没啥我就不在这里贴出来了啊):

    @Override
    public List<User> userList(int page, int rows) {
        page = (page-1)*rows;
        return userMapper.findByPage(page,rows);
    }

这里想补充一句，因为page是页码数，到数据库中查找的时候，会把这个当做查询的起始点，也就是说，第一页从第一条查询，第二页从第二条查询。数据就会出现偏差。由数学知识可以很容易的推算出两者的关系：查询起始点 = （当前页码 - 1）*每次查询的记录数。

4.Dao层：

UserMapper.java:

 List<User> findByPage(@Param("page") int page, @Param("rows") int rows);

UserMapper.xml

    <select id="findByPage" resultType="User">
        SELECT * FROM gt_user LIMIT #{page},#{rows}
    </select>

四、结果展示：

说明：因为测试的时候，好多是真实数据，所有就打码了，不要想歪了哦。（手动滑稽）

SSM+EasyUI实现分页功能

额，好像整个页面都变模糊了，但是不影响。。。

有不正确的地方或者不明白的地方，欢迎留言。

SSM+EasyUI实现分页功能

一、整体的思路

二、详解

三、代码

相关推荐