SSM框架关于分页bug小结

在使用SSM框架实现分页功能时，我们会遇到各种各样的问题，导致分页按钮失效，一般都是细节代码导致的，下面就我使用SSM框架做项目时遇到的分页按钮点击之后无效分享给大家。

现在分页一般使用表单的方式进行提交，常见问题一个一个分析:

1. form表单

<form action="/con/show" method="post" id="MyForm" style="text-align: center">
    产品代码：<input type="text" name="id" value="${page.id}">  
    <input type="hidden" name="currPage" id="pageNum" value="1">
    <input type="submit" value="搜索">  
</form>

• form表单一般出现问题是：隐藏表单忘记写或者写错，这种错误的表现形式一般是url后面不带currPage参数。
• 反例：隐藏表单中id和name属性值写反导致出错

<input type="hidden" name="pageNum" id="currPage" value="1">

2.分页代码如下：

<table border="1" cellspacing="5" cellpadding="10" align="center">
    <tr>
        <td><a href="javascript:goPage(1)">首页</a></td>
        <td><a href="javascript:goPage(${page.currPage -1})">上一页</a></td>
        <c:forEach begin="1" var="i" end="${page.totalPage}">
            <td><a href="javascript:goPage(${i})">${i}</a></td>
        </c:forEach>
        <td><a href="javascript:goPage(${page.currPage + 1})">下一页</a></td>
        <td><a href="javascript:goPage(${page.totalPage})">尾页</a></td>        
        <td>
            跳转到第<input type="text" size="2" value="${page.currPage}">页
            <input type="button" value="GO" onclick="goPage(this.previousElementSibling.value)">
        </td>
    </tr>
</table>

• 分页显示页面一般很少出错。
• 分页页面如果出错一般在跳转按钮这个位置，我使用的时获取上一个兄弟节点的属性值，如果你这一块不熟练就很容易出错。 jquery对象和dom对象的方法不一样，比如取属性的值domObj.value , jQueryObj.val()。

3.JavaScript函数部分

<script>
    //1.接受到的page 赋值给 form中的隐藏表单
    function goPage(page) {
        var total=${page.totalPage};

        if(page>total){
            page=total;
        }
        if(page<1){
            page=1;
        }        
        // 2.提交表单
        $("#pageNum").val(page);
        $("#MyForm").submit();
    }    
</script>

需要注意以下两点

• 必须在头标签导jQuery的类库，不导jQuery的类库，就无法使用其强大的选择器功能。

<%--该标签不能为单标签--%>
<script src="/js/jquery-3.3.1.min.js"></script>

• 必须对传入page的值做判断，不然会报错。

4.最后补充一种情况，就是条件查询和分页一起使用的情况，如果条件部分的代码出错，将会导致分页按钮失效。特别时出现下拉框的时候尤其要注意。

jsp页面：下拉框带条件查询

风险评级：
    <select name="risk" >
        <option value="a">--请选择--</option>
        <option value="R1" <c:if test="${page.risk.equals('R1')}">selected=true</c:if>>R1</option>
        <option value="R2" <c:if test="${page.risk.equals('R2')}">selected=true</c:if>>R2</option>
        <option value="R3" <c:if test="${page.risk.equals('R3')}">selected=true</c:if>>R3</option>
    </select>

• service层错误写法：未排除risk值为a的情况，会导致整个页面无法分页显示

if(page.getRisk() != null){
            c.andRiskEqualTo(page.getRisk());
        }

• service层正确写法：排除risk值默认为a的情况

if(page.getRisk() != null && !page.getRisk().equals("a")){
            c.andRiskEqualTo(page.getRisk());
        }