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>