ssm框架中利用pagehelper分页,完成模糊查询与select条件查询
一、问题分析
1.1 往期回顾
pagehelper分页
https://blog.csdn.net/Jia_Peng_Tao/article/details/107027613
模糊查询与select条件查询
https://editor.csdn.net/md/?articleId=107033582
1.2 查询条件的数据回显
查询条件写入输入框、select菜单后,点击查询,查询结果正确,但是输入框、select菜单中的查询条件消失。
1.3 多条件查询后,再翻页,数据显示有误
分页功能与多条件查询同时在一个页面上完成时,在使用多条件查询查出数据后,点击翻页按钮时,显示的数据会不符合查询条件。
原因是在点击翻页时,查询条件输入框中的条件信息没有被储存起来,值为null,查询条件被清空,系统直接调用没有加条件的分页查询查询数据,所以才有查询数据异常。
解决这一问题需要将查询条件“储存起来”,在点击翻页时不会丢失。
二、解决数据回显问题
修改jsp页面即可。
<form action="/video/list" method="post">
模糊查询名称:<input type="text" name="videoQueryName"
<%--解决输入框回显--%>
<%--在input输入框中加入value属性,value:输入框中的默认值。--%>
value="${queryVo.videoQueryName}"><br>
讲师名称:<select name="speakerQueryName">
<option value="">讲师名</option>
<c:forEach items="${speakerList}" var="speaker">
<option value="${speaker.id}"
<%--解决下拉菜单回显--%>
<%--在遍历下拉菜单时加入判断,
如果储存在queryVo(查询条件)中的讲师id与被遍历集合中的讲师id相同,
那么这个讲师就是我们之前选择的讲师,
在<option>标签中加入selected属性,表示默认选择这个下拉选项--%>
${queryVo.speakerQueryId == speaker.id ? 'selected':''}
>${speaker.speakerName}</option>
</c:forEach>
</select><br>
<input type="submit" value="提交">
</form>
三、解决翻页后数据显示有误
解决回显问题以后,在提交表单时,查询条件就被“储存起来”了,
前端储存数据(localStorage等),后台储存数据(cookie、session)。
3.1 前端实现
3.1.1 修改form表单
在form表单中加入pageNum文本框,显示为不可见。
为表单增加id属性,action="/提交控制器/控制器中的方法"
<form id="queryForm" action="-----">
<input type="hidden" name="pageNum" id="pageNum">
</form>
3.1.2 翻页按钮添加单击事件
修改翻页按钮,点击翻页时将pageNum作为参数,提交到function函数queryForm中。
此时,标签已失去超链接功能,href的值可以替换为#或者,javascript:void(0)。
标签仅含有“携带pageNum参数,并提交表单”的功能,替换为也可以。
<%--如果 当前页=总页数 --%>
<c:if test="${pageInfo.pageNum == pageInfo.pages}">
<a href="#" οnclick="queryForm(1)">首页</a>
<a href="#" οnclick="queryForm(${pageInfo.pageNum - 1})">上一页</a>
</c:if>
<%--如果 当前页<总页数 && 当前页>1 --%>
<c:if test="${pageInfo.pageNum < pageInfo.pages && pageInfo.pageNum > 1}">
<a href="#" οnclick="queryForm(1)">首页</a>
<a href="#" οnclick="queryForm(${pageInfo.pageNum - 1})">上一页</a>
<a href="#" οnclick="queryForm( ${pageInfo.pageNum + 1})">下一页</a>
<a href="#" οnclick="queryForm(${pageInfo.pages})">末页</a>
</c:if>
<%--如果 当前页=1 --%>
<c:if test="${pageInfo.pageNum == 1}">
<a href="#" οnclick="queryForm( ${pageInfo.pageNum + 1})">下一页</a>
<a href="#" οnclick="queryForm(${pageInfo.pages})">末页</a>
</c:if>
3.1.3 pageNum传入form表单
编写function函数queryForm,使翻页时,将pageNum传入form表单中的隐藏文本框,并提交表单。
<script>
<%--点击翻页触发该函数,将要跳转的pageNum作为参数传入--%>
function queryForm(pageNum) {
<%--使用jquery的id选择器选中表单中的<input>标签,并赋值--%>
$("#pageNum").val(pageNum);
<%--使用id选择器选中form表单,并添加提交事件。即,触发这个函数将提交表单。--%>
$("#queryForm").submit();
}
</script>