龙空技术网

利用Datagrid做数据分页

码仔 125

前言:

目前姐妹们对“neteasyuidatagrid”大概比较着重,看官们都需要了解一些“neteasyuidatagrid”的相关文章。那么小编在网上搜集了一些关于“neteasyuidatagrid””的相关知识,希望我们能喜欢,兄弟们一起来学习一下吧!

作者:二枚目

博客:

引言

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!=">

and name like CONCAT(#{name}, '%')

</if>

<if test="sex!= 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!=">

and name like CONCAT(#{name}, '%')

</if>

<if test="sex!= and '' != sex">

and sex = #{sex}

</if>

<if test="1 == 1">

and 1=1

</if>

</select>

Mapper.xml

具体效果如图

运行效果图1

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

运行效果图2

项目代码已更新至Github:

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

今日问题:

你平均每天加班多久?

留言格式:

打卡x 天,答:xxx。

告诉你一个小技巧:

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

标签: #neteasyuidatagrid