day120-商城业务-检索服务-页面分页数据渲染

1.关键词收索

添加js方法

    function searchByKeyWord(){
        searchProducts('keyword',$('#keyword_text').val())
    }

元素添加id，然后超链接调用方法添加

2.分页

上一页在不是第一页的时候显示，下一页在不是最后一页的时候显示

给他俩添加自定义属性，跳转的时候用的到

 

查询结果对象类中加入 页码集合的属性

查询时加入页码集合

        List<Integer> pageNavs = new ArrayList<>();
        for (int i = 0; i < totalPages; i++) {
            pageNavs.add(i+1);
        }
        result.setPageNavs(pageNavs);

遍历页码

添加事件

                    <!--分页-->
                    <div class="filter_page">
                        <div class="page_wrap">
                            <span class="page_span1">
                                   <!-- 不是第一页时显示上一页 -->
                                <a class="page_a" href="#" th:if="${result.pageNo>1}" th:attr="pn=${result.pageNo-1}">
                                    < 上一页
                                </a>
                                <!-- 将各个页码遍历显示，并将当前页码绑定至属性pn -->
                                <a href="#" class="page_a"
                                   th:each="page: ${result.pageNavs}"
                                   th:text="${page}"
                                   th:style="${page==result.pageNo?'border: 0;color:#ee2222;background: #fff':''}"
                                   th:attr="pn=${page}"
                                >1</a>
                                <!-- 不是最后一页时显示下一页 -->
                                <a href="#" class="page_a" th:if="${result.pageNo<result.totalPages}" th:attr="pn=${result.pageNo+1}">
                                    下一页 >
                                </a>
                            </span>
                                                <span class="page_span2">
                                <em>共<b th:text="${result.totalPages}">169</b>页&nbsp;&nbsp;到第</em>
                                <input type="number" value="1" class="page_input">
                                <em>页</em>
                                <a href="#">确定</a>
                            </span>
                        </div>
                    </div>

js方法

    $(".page_a").click(function () {
        debugger
        var pn=$(this).attr("pn");
        location.href=replaceParamVal(location.href,"pageNum",pn,false);
        console.log(replaceParamVal(location.href,"pageNum",pn,false))
    })

    function replaceParamVal(url, paramName, replaceVal,forceAdd) {
        var oUrl = url.toString();
        var nUrl;
        if (oUrl.indexOf(paramName) != -1) {
            if (forceAdd && oUrl.indexOf(paramName + "=" + replaceVal) == -1) {
                if (oUrl.indexOf("?") != -1) {
                    nUrl = oUrl + "&" + paramName + "=" + replaceVal;
                } else {
                    nUrl = oUrl + "?" + paramName + "=" + replaceVal;
                }
            } else {
                var re = eval('/(' + paramName + '=)([^&]*)/gi');
                nUrl = oUrl.replace(re, paramName + '=' + replaceVal);
            }
        } else {
            if (oUrl.indexOf("?") != -1) {
                nUrl = oUrl + "&" + paramName + "=" + replaceVal;
            } else {
                nUrl = oUrl + "?" + paramName + "=" + replaceVal;
            }
        }
        return nUrl;
    };

效果如下

点击页码的话会带参查询

后面关于排序与面包屑导航啥的我就不做了，因为要跳槽，时间紧张,而且那些功能后面使用vue等前端框架中自带的会简单不少