众筹网_角色维护_分页查询

一、思路

二、代码

1、编写SQL语句

位置：/admin-02webui/src/main/resources/mapper/RoleMapper.xml

<sql id="Base_Column_List" >
  id, name
</sql>

<!-- 关键词查询 -->
<select id="selectRoleByKeyword" resultMap="BaseResultMap" parameterType="string">
  select
  <include refid="Base_Column_List" />
  from t_role 
  where name like CONCAT("%",#{keyword},"%");
</select>

2、RoleService实现类（接口略）

位置：/admin-03component/src/main/java/com/crowd/service/impl/RoleServiceImpl.java

/**
 * 角色关键词查询
 */
@Override
public PageInfo<Role> getPageInfo(String keyword, Integer pageSize, Integer pageNum) {

	// 开启分页
	PageHelper.startPage(pageNum, pageSize);
	
	List<Role> roleByKeyword = roleMapper.selectRoleByKeyword(keyword);
	
	// 封装到pageInfo
	return new PageInfo<Role>(roleByKeyword);
}

按关键词查询角色列表，并将其封装到pageInfo中返回

3、RoleHandler

位置：/admin-03component/src/main/java/com/crowd/mvc/handler/RoleHandler.java

/**
 * 查询角色列表
 * @param keyword
 * @param pageSize
 * @param pageNum
 * @param modelMap
 * @return
 */
@ResponseBody
@RequestMapping("role/get/pageInfo.json")
public ResultEntity<PageInfo<Role>> getPageInfo(
		@RequestParam(value = "keyword",defaultValue = "")String keyword,
		@RequestParam(value = "pageSize",defaultValue = "5")Integer pageSize,
		@RequestParam(value = "pageNum",defaultValue = "1")Integer pageNum,
		ModelMap modelMap) {
	
	PageInfo<Role> pageInfo = roleService.getPageInfo(keyword, pageSize, pageNum);
	
	// modelMap.addAttribute(CrowdConstant.ATTR_NAME_PAGE_INFO, pageInfo);
	// 对于前端以json处理的数据，不是用modelMap接收，而是封装到resultEntity中再传给前端
	return ResultEntity.successWithData(pageInfo);
}

4、新建一个js文件完成分页前端代码

位置：/admin-02webui/src/main/webapp/js/my-role.js

// 执行分页，生成页面效果，任何时候调用这个函数都会重新加载页面
function generatePage() {
	// 1.获取分页数据
	var pageInfo = getPageInfoRemote();
	// 2.填充表格
	fillTableBody(pageInfo);
}

// 访问服务器端程序获取 pageInfo 数据
function getPageInfoRemote() {
	// 调用$.ajax()函数发送请求并接受$.ajax()函数的返回值ajaxResult
	var ajaxResult = $.ajax({
		"url" : "role/get/pageInfo.json",
		"type" : "post",
		"data" : {
			"pageNum" : window.pageNum,
			"pageSize" : window.pageSize,
			"keyword" : window.keyword
		},
		// 请求体为form data而不是request payload，不需要设置contentType
		// 服务器端也是用requestParam接收就行
		"async" : false,// 设置为同步响应（默认为异步）
		"dataType" : "json"// 对待服务器端返回的数据
	});
	console.log(ajaxResult);

	// 判断当前响应状态码是否为 200
	var statusCode = ajaxResult.status;
	// 如果当前响应状态码不是 200，说明发生了错误或其他意外情况，显示提示消息，让当前函数停止执行
	if (statusCode != 200) {
		layer.msg("失败！响应状态码=" + statusCode + " 说明信息=" + ajaxResult.statusText);
		return null;
	}
	// 如果响应状态码是 200，说明请求处理成功，获取 pageInfo
	var resultEntity = ajaxResult.responseJSON;
	// 从 resultEntity 中获取 result 属性
	var result = resultEntity.operationResult;

	// 判断 result 是否成功
	if (result == "FAILED") {
		layer.msg(resultEntity.operationMessage);
		return null;
	}
	// 确认 result 为成功后获取 pageInfo
	var pageInfo = resultEntity.queryData;
	// 返回 pageInfo
	return pageInfo;
}

// 填充表格
function fillTableBody(pageInfo) {
	// 清除 tbody 中的旧的内容
	$("#rolePageBody").empty();

	// 这里清空是为了让没有搜索结果时不显示页码导航条
	$("#Pagination").empty();

	// 判断 pageInfo 对象是否有效
	if (pageInfo == null || pageInfo == undefined || pageInfo.list == null
			|| pageInfo.list.length == 0) {
		$("#rolePageBody").append("<tr><td colspan='4' align='center'>抱歉！没有查询到您搜 索的数据！</td></tr>");
		return;
	}

	// 使用 pageInfo 的 list 属性填充 tbody
	for (var i = 0; i < pageInfo.list.length; i++) {
		var role = pageInfo.list[i];
		var roleId = role.id;
		var roleName = role.name;
		var numberTd = "<td>" + (i + 1) + "</td>";
		var checkboxTd = "<td><input type='checkbox'></td>";
		var roleNameTd = "<td>" + roleName + "</td>";

		var checkBtn = "<button type='button' class='btn btn-success btn-xs'><i class=' glyphicon glyphicon-check'></i></button>";
		var pencilBtn = "<button type='button' class='btn btn-primary btn-xs'><i class=' glyphicon glyphicon-pencil'></i></button>";
		var removeBtn = "<button type='button' class='btn btn-danger btn-xs'><i class=' glyphicon glyphicon-remove'></i></button>";

		var buttonTd = "<td>" + checkBtn + pencilBtn + removeBtn + "</td>";
		var tr = "<tr>" + numberTd + checkboxTd + roleNameTd + buttonTd
				+ "</tr>";
		$("#rolePageBody").append(tr);
	}
	// 生成分页导航条
	generateNavigator(pageInfo);
}


// 生成分页页码导航条
function generateNavigator(pageInfo) {
	// 获取总记录数
	var totalRecord = pageInfo.total;
	// 声明相关属性
	var properties = {
		"num_edge_entries" : 3,
		"num_display_entries" : 5,
		"callback" : paginationCallBack,
		"items_per_page" : pageInfo.pageSize,
		"current_page" : pageInfo.pageNum - 1,
		"prev_text" : "上一页",
		"next_text" : "下一页"
	}
	// 调用 pagination()函数
	$("#Pagination").pagination(totalRecord, properties);
}


//翻页时的回调函数 
function paginationCallBack(pageIndex, jQuery) { 
	// 修改 window 对象的 pageNum 属性 
	window.pageNum = pageIndex + 1;
	// 调用分页函数 
	generatePage(); 
	// 取消页码超链接的默认行为 
	return false;
}

下图为F12中$.ajax()函数的返回值的属性

• 状态码：

• responseJSON：

5、注：1、HTTP请求中的Form Data与Request Payload的区别

• 这两种方式主要是通过改变请求头的Content-Type属性来实现的，一般请求默认使用application/x-www-form-urlencoded编码数据，此时传参形式为Form Data，如果是application/json或multipar/form-data的话，则传参形式为 request payload；
• 如果请求头里设置Content-Type: application/x-www-form-urlencoded，那么这个请求被认为是表单请求，参数出现在Form Data里，格式为key=value&key=value&key=value...
• 原生的AJAX请求头里设置Content-Type:application/json，或者使用默认的请求头Content-Type:text/plain;参数会显示在Request payload块里提交；
• 本例中js文件里的Ajax请求中没有设置Content-Type属性，故为Form Data.

             2、阻止超连接默认行为：让超链接去执行一个js函数，而不是去跳转到一个地址

6、role-page页面初始化数据并调用执行分页函数

位置：/admin-02webui/src/main/webapp/WEB-INF/role-page.jsp

$(function() {
	// 1.为分页操作准备初始化数据 (window.xxx全局变量)
	window.pageNum = 1;
	window.pageSize = 5;
	window.keyword = "";
	// 2.调用执行分页的函数，显示分页效果 
	generatePage();
});