场景描述:
在项目使用miniui查询数据展示的时候,进行分页展示。但是在分页查询的过程中,发现miniui的ajax传到后台的参数有pageIndex、pageSize、sortField、sortOrder参数,而在每次查询的时候,数据总数是该次分页查询的总数,数据量少的时候完全没什么压力,但是当数据量很多的时候会很卡,完全违背了分页查询提高查询效率的出发点。
我的场景是使用@ResponseBody将查询出的list自动给我转换好格式传给前端,虽然很省事自动的把我分页查询的数据进行展示,但是只能处理一次分页查询出的所有数据。在查阅很多文章后(特别是有问题多在miniui官方的论坛查找),发现官方给出的数据格式格式是一个大的JSON中有两个元素,一个是total,一个是data,我就想自己设定一个跟官方文档的样式的JSON数据传给前台。在传给前台展示的时候,是只有两条数据而且是空白的,这也很好理解,miniui是把我给他的数据,total和data一起拿出来进行添加到界面上了。所以,再查看miniui的官方API发现,data后面有set、get等方法,就抱着试试看的态度,取出data使用setData方法设定数据,发现可行。既然data可以,那总数也可以,就使用setTotalCount设定总数。
我觉得miniui的官方文档里说的非常的不详细,所以需要自己去了解并熟悉这些方法什么的。
Mapper部分:
<!--所有字段映射-->
<resultMap id="BaseResultMap" type="xxx.xxx.xxx.WdVisitorhistory">
<id column="CODE" jdbcType="DECIMAL" property="code" />
<result column="IP" jdbcType="VARCHAR" property="ip" />
<result column="LOGIN_TIME" jdbcType="DATE" property="loginTime" />
</resultMap>
<select id="visitorHistoryCount" resultType="String">
select count(*) from WD_VISITORHISTORY
</select>
<select id="findAllVisitorhistory" resultMap="BaseResultMap" parameterType="Object">
SELECT *
FROM (
SELECT r.*,ROWNUM rowno
FROM(
select CODE,ip,TO_CHAR(LOGIN_TIME,'yyyy-mm-dd hh24:mi:ss')LOGIN_TIME from WD_VISITORHISTORY
<choose>
<when test="sortField!=null and sortField!=''">
ORDER BY ${sortField} ${sortOrder}
</when>
<otherwise>
ORDER BY LOGIN_TIME desc
</otherwise>
</choose>
)r
WHERE ROWNUM <= (#{pageIndex}+1)*#{pageSize}
)
WHERE rowno > (#{pageIndex})*#{pageSize}
</select>
这里需要说明的是Mybatis的排序与“$”和“#”的关系。
“ORDER BY #{sortField} #{sortOrder}”等同于“ORDER BY 'xxx' 'xxx'”
解释:MyBatis会自动将排序字段当成一个字符串,可以通过执行,但无效,查出的内容为空。
“ORDER BY ${sortField} ${sortOrder}”等同于“ORDER BY xxx xxx”
解释:Mybatis会将其视作直接变量,变量替换成功后,不会再加上引号成为字符串。
“#”能防止SQL注入
“$”无法防止SQL注入
JAVA部分:
@RequestMapping("findVisitorHistory.do")
@ResponseBody
public JSONArray findVisitorHistory(String pageIndex,String pageSize,String sortField,String sortOrder) {
if("loginTime".equals(sortField)){
sortField="LOGIN_TIME";
}
// 返回的Json数组,格式为{{total:...},{data:...}}
JSONArray jsonArray=new JSONArray();
// 存放json数组中的具体内容,格式为total:...}、data:...}
JSONObject jsonObject=new JSONObject();
//总数
jsonObject.put("total",visitorhistoryDAO.visitorHistoryCount());
jsonArray.add(jsonObject);
// 清空数据总数,用于存放下面的数据
jsonObject.clear();
//数据
jsonObject.put("data",
JSONArray.fromObject(visitorhistoryDAO.findAllVisitorhistory(pageIndex,pageSize,sortField,sortOrder)));
jsonArray.add(jsonObject);
return jsonArray;
}
JSP部分:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!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>
<!-- 公共部分 -->
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<jsp:include page="/WEB-INF/views/include/common.jsp" flush="true" />
<link rel="stylesheet" href="${ctxStatic}/miniui/themes/default/miniui.css" />
<link rel="stylesheet" href="${ctxStatic}/miniui/themes/icons.css" />
<link rel="stylesheet" href="${ctxStatic}/common/css/bootstrap/bootstrap.css" />
<link rel="stylesheet" href="${ctxStatic}/pat_view/css/pat_view.css" />
<script src="${ctxStatic}/miniui/miniui.js"></script>
</head>
<body>
<jsp:include page="../../include/head.jsp" flush="true" />
<div id="datagrid1" class="mini-datagrid" style="width:80%;height:420px;" allowResize="true"
sizeList="[10,30,50,100]" pageSize="10" showEmptyText="true" emptyText="未查到数据"
url="findVisitorHistory.do"
>
<div property="columns">
<div type="indexcolumn"></div>
<div field="code" width="120" headerAlign="center" allowSort="true">用户code</div>
<div field="ip" width="120" headerAlign="center" >ip</div>
<div field="loginTime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss" allowSort="true">访问时间</div>
</div>
</div>
<script type="text/javascript">
mini.parse();
var grid = mini.get("datagrid1");
// 第一次加载时
grid.load();
// 监测每一次加载,每一次加载,加载自定义内容
grid.on("load",function(){
var data=grid.getData();
console.log(data);
grid.setTotalCount(data[0].total);
grid.setData(data[1].data);
})
</script>
</body>
</html>
JSP页面中可以通过开发者模式查看返回的数据格式与内容。我的场景是刚进入页面则进行首页的ajax查询,之后点击下一页还是排序等,都进行一个查询,每次的查询结果都按照监测的回调函数来展示我的数据。