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

一、搜索栏功能

**cfmall-search**服务：**cfmall-search/src/main/resources/templates/list.html**

为input创建id，方便后续拿到input中的输入；编写跳转方法

搜索框回显搜索内容：

• th:value 为属性设置值，
• param是指请求参数，
• param.keyword是指请求参数中的keyword值

<div class="header_form">
    <input id="keyword_input" type="text" placeholder="手机"  th:value="${param.keyword}"/>
    <a href="javascript:searchByKeyword();">搜索</a>
</div>

function searchByKeyword() {
    searchProducts("keyword",$("#keyword_input").val());
}

测试效果

将条件清空，搜索框输入“小米”，点击搜索后会发现只有小米品牌得手机

th:value="${param.keyword}"：获取到请求参数值

---

二、页面分页数据渲染

**cfmall-search/src/main/resources/templates/list.html**

2.1 页码条件判断

1、当前页码＞第一页才能显示上一页，当前页码＜总页码才能显示下一页

2.2 遍历显示页码

2.3 当前页码特定样式

2.4 获取总页数

2.5 请求参数的替换

将a标签中href全部删除，添加a标签的class，为其绑定事件，并编写回调函数

---

三、测试

---

四、代码

cfmall-search/src/main/resources/templates/list.html

<!--分页-->
<div class="filter_page">
    <div class="page_wrap">
        <span class="page_span1">
            <a class="page_a" th:attr="pn=${result.getPageNum()-1}" th:if="${result.pageNum>1}">
                < 上一页
            </a>
            <a class="page_a" th:attr="pn=${result.pageNum},style=${nav==result.pageNum?'border: 0;color:#ee2222;background: #fff':''} "
               th:each="nav:${result.getPageNavs()}">[[${nav}]]</a>
            <a class="page_a" th:attr="pn=${result.getPageNum()+1}" th:if="${result.pageNum<result.totalPages}">
                下一页 >
            </a>
        </span>
        <span class="page_span2">
            <em>共<b th:text="${result.getTotalPages()}">169</b>页&nbsp;&nbsp;到第</em>
            <input type="number" value="1">
            <em>页</em>
            <a href="/static/search/#">确定</a>
        </span>
    </div>
</div>

$(".page_a").click(function () {
    var pn = $(this).attr("pn");
    var href = location.href;
    if (href.indexOf("pageNum") != -1) {
        // 替换pageNum的值
        location.href = replaceParamVal(href, "pageNum", pn);
    } else if (href.indexOf("?") != -1) {
        location.href = location.href + "&pageNum=" + pn;
    } else {
        location.href = location.href + "?pageNum=" + pn;
    }
    //禁用默认行为，a标签可能会跳转
    return false;
});

function replaceParamVal(url, paramName, replaceVal) {
    var oUrl = url.toString();
    var re = eval('/(' + paramName + '=)([^&]*)/gi');
    var nUrl = oUrl.replace(re, paramName + "=" + replaceVal);
    return nUrl;
}