利用Datagrid做数据分页

作者：二枚目

博客：https://www.jianshu.com/p/20462f1f278e

引言

EasyUI最常用的的数据网格 datagrid 控件 pagination 属性设置为 true 后，控件的底部就自带了总数、页数、每页多少行等数据的显示，但是需要我们后台来返回相关数据给前端让 datagrid 来显示和调整，在分页功能里面，前端传入后台的数据有：rows（每页多少行）、page（当前显示第几页），后台需要返回前端的数据有：total（总数）、data（本页需要显示的数据）。

实现过程

这里使用之前写的人员管理系统来实现人员信息显示的分页效果，后台框架使用SpringBoot整合Mybatis，分页实现流程如下
1、前端准备：前端将 datagrid 控件的 pagination 和 rownumbers 属性设置为 true；
2、分页数据：Controller层的查询方法里，从request里获取page和rows，这里page需要自减并乘以rows，运算完将两者添加进查询map里；Service层和Dao层不变，Dao的实现Mapper.xml里，查询的select里末尾加上一句SQL：order by pid asc limit #{from},#{rows};  （表示从第from个数据开始查询rows个数据，from即page的自减乘rows）；
3、数据总数：Service 和 Dao 层新增方法 getTotal(Map<String, Object> map) ，实现Mapper.xml里新写一个select count获取数据总数。Controller 层声明Integer total = Service.getTotal(map)；并返回数据和total。

具体代码（Controller层）：

@RequestMapping("/search")
    public String searchEmp(HttpServletRequest request) {
        Map<String, Object> map = new HashMap<String, Object>();
        String name = request.getParameter("name");
        String sex = request.getParameter("sex");
        String rows = request.getParameter("rows");//多少行
        String page = request.getParameter("page");//页
        int pageNum = (Integer.parseInt(page)-1)*Integer.parseInt(rows);
        int from = pageNum > 1?pageNum:0;
        int row = Integer.parseInt(rows);
        map.put("name", name);
        map.put("sex", sex);
        map.put("from", from);
        map.put("rows", row);
        Integer total=0;
        
        total= employeeService.getTotal(map);
        List<Employee> list = employeeService.getEmployees(map);
        String jsonString = JSONArray.toJSONString(list);
        String data = "{\"total\":"+total+",\"rows\":"+jsonString+"}";
        return data;
    }

Controller层

Mapper.xml（第一个select是根据页面和每页多少行查询数据并封装到实体数组中返回，第二个select是查询总数）：

<select id="getEmployees" resultType="Employee" parameterType="Map">
        SELECT p_employee_id pid,name,sex,birthday,idcard,phone,address,photo FROM t_employee WHERE active=1
        <if test="name!=null">
            and name like CONCAT(#{name}, '%')
        </if>
        <if test="sex!=null and '' != sex">
            and sex = #{sex}
        </if>
        <if test="1 == 1">
            and 1=1
        </if>
        order by pid asc limit #{from},#{rows};
    </select>
    <select id="getTotal" resultType="int" parameterType="Map">
        SELECT count(p_employee_id) FROM t_employee WHERE active=1
        <if test="name!=null">
            and name like CONCAT(#{name}, '%')
        </if>
        <if test="sex!=null and '' != sex">
            and sex = #{sex}
        </if>
        <if test="1 == 1">
            and 1=1
        </if>
    </select>

Mapper.xml

具体效果如图

运行效果图1

左下角选择每页显示10行并切换到最后一页：

运行效果图2

项目代码已更新至Github：https://github.com/zhaozsh/employee_ssm

等等，先别走！「码个蛋」又有活动了！参与活动不但可以培养自己的好习惯，还能拿到「码个蛋」IP系列专属奖品，速度要快...

 戳我看详情   

今日问题：

你平均每天加班多久？

留言格式：

打卡 x 天，答：xxx。

告诉你一个小技巧：

只需3步，你将不会错过任何一篇文章！