Mybatis与miniui的分页结合，Mybatis排序、miniui分页查询、miniui加载等问题

场景描述：

在项目使用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查询，之后点击下一页还是排序等，都进行一个查询，每次的查询结果都按照监测的回调函数来展示我的数据。

Mybatis与miniui的分页结合，Mybatis排序、miniui分页查询、miniui加载等问题

猜你喜欢