分页数据渲染

SearchResult属性增加

代码语言：javascript复制

增加属性 private  List<Integer> pageNavs;

目的：产生分页效果，方便操作，navs记录了从1到总页数的暑假

不是第一页时显示上一页

代码语言：javascript复制

<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才显示上一页

页数遍历切换

代码语言：javascript复制

<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

下一页数据拼接

代码语言：javascript复制

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

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

总共页码

代码语言：javascript复制

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

拼接函数

代码语言：javascript复制

    $(".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; };

最终效果

渲染遍历分页函数数据

0 人点赞