SearchResult属性增加

增加属性 private  List<Integer> pageNavs;
 
 
目的：产生分页效果，方便操作，navs记录了从1到总页数的暑假

不是第一页时显示上一页

<a class="page_a" th:attr="pn=${result.pageNum - 1}" href="/static/search/#"
   th:if="${result.pageNum>1}">
    < 上一页
</a>
th:attr="pn=${result.pageNum - 1}"：将当前页码-1给pn赋值
 th:if="${result.pageNum>1}"：如果当前页面大于1才显示上一页

 页数遍历切换

<a class="page_a"
   th:attr="pn=${navs},style=${navs == result.pageNum?'border: 0;color:#ee2222;background: #fff':''}"
   th:each="navs : ${result.pageNavs}">[[${nav}]]</a>

</a>

将各个页码遍历显示，并将当前页码绑定至属性pn

下一页数据拼接

<a class="page_a" th:attr="pn=${result.pageNum + 1}"
   th:if="${result.pageNum<result.totalPages}">
    下一页 >

不是最后一页时显示下一页

总共页码 

<span class="page_span2">
 <em>共<b>[[${result.totalPages}]]</b>页  到第</em>
 <input type="number" value="1">
<em>页</em>
  <a class="page_submit">确定</a>
 </span>

    

 拼接函数

$(".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 {
            location.href = location.href + "&pageNum=" + pn;
        }
        return false;
    })

 替换函数

function replaceParamVal(url, paramName, replaceVal,forceAdd) {
         var oUrl = url.toString();
         var nUrl;
         if (oUrl.indexOf(paramName) != -1) {
             if( forceAdd ) {
                 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;
     };

最终效果 

分页数据渲染_开发语言