ssm框架中利用pagehelper分页，完成模糊查询与select条件查询

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>                           &nbsp;&nbsp;
    <a href="#" οnclick="queryForm(${pageInfo.pageNum - 1})">上一页</a>   &nbsp;&nbsp;
</c:if>

<%--如果  当前页<总页数  &&  当前页>1  --%>
<c:if test="${pageInfo.pageNum < pageInfo.pages && pageInfo.pageNum > 1}">
    <a href="#" οnclick="queryForm(1)">首页</a>	&nbsp;&nbsp;
    <a href="#" οnclick="queryForm(${pageInfo.pageNum - 1})">上一页</a> 	&nbsp;&nbsp;
    <a href="#" οnclick="queryForm( ${pageInfo.pageNum + 1})">下一页</a>	&nbsp;&nbsp;
    <a href="#" οnclick="queryForm(${pageInfo.pages})">末页</a>       	&nbsp;&nbsp;
</c:if>

<%--如果  当前页=1  --%>
<c:if test="${pageInfo.pageNum == 1}">
    <a href="#" οnclick="queryForm( ${pageInfo.pageNum + 1})">下一页</a>	&nbsp;&nbsp;
    <a href="#" οnclick="queryForm(${pageInfo.pages})">末页</a>  			&nbsp;&nbsp;
</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>